【JavaScript高级程序设计】16、DOM2和DOM3

样式

通过JavaScript来操作css

<!DOCTYPE html>
<html>
<head>
    <title>DOM Style Object Example</title>
</head>
<body>
    <div id="myDiv" style="background-color: blue; width: 10px; height: 25px"></div>
    <input type="button" value="Get Styles" onclick="getStyles()" />    
    <input type="button" value="Get CSS" onclick="getCSS()" />    
    <input type="button" value="Change Styles" onclick="changeStyles()" />    
    <input type="button" value="Change CSS" onclick="changeCSS()" /><br />    
    <input type="button" value="Enumerate" onclick="enumerateCSS()" />    
    <input type="button" value="Enumerate CSS Values" onclick="enumerateCSSValues()" /><br />
    <input type="button" value="Remove Border" onclick="removeBorder()" />    
    
    <script type="text/javascript">
        /**
         改变css的类型
        */
        function changeStyles()
        {
            var myDiv = document.getElementById("myDiv");
            //修改属性，设置背景颜色为brown，第三个是优先权标志,如果第二个标志乱写
            //那么就不会改变它的颜色值
            myDiv.style.setProperty("background-color", "brown", "");;
            //设置背景宽度为100px的宽度，第三个是优先权，入：important或者为空
            myDiv.style.setProperty("width", "100px", "");
            myDiv.style.setProperty("height", "200px", "");
            //修改边界宽度
            myDiv.style.setProperty("border", "1px solid black", "");
        }
        
        //获取页面标签的页面样式
        function getStyles()
        {
            var myDiv = document.getElementById("myDiv");
            //输出其中的数据
            alert(myDiv.style.getPropertyValue("background-color") + "<==>" + myDiv.style.getPropertyValue("width") + "<==>" + 
            myDiv.style.getPropertyValue("height"));

        }
        
        /**
          取得css文本代码
        */
        function getCSS()
        {
            var myDiv = document.getElementById("myDiv");
            alert(myDiv.style.cssText);
        }
        
        /**
         直接修改css文本
        */
        function changeCSS()
        {
            var myDiv = document.getElementById("myDiv");
            myDiv.style.cssText ="width: 50px; height: 100px; background-color: red";
        }
        
        /**
          吧所有的css样式全部放到一个数组中，然后一次性全部输出
        */
        function enumerateCSS()
        {
            var myDiv = document.getElementById("myDiv");
            var props = new Array();
            for (var i=0, len=myDiv.style.length; i < len; i++)
            {
                var prop = myDiv.style[i];     //或者使用 myDiv.style.item(i)
                var value = myDiv.style.getPropertyValue(prop);
                props.push(prop + " : " + value); 
            }
            alert(props.join("\n"));
        }
        
        /**
         取得css的类型或者css类型的数据
        */
        function enumerateCSSValues()
        {
            var myDiv = document.getElementById("myDiv");
            var props = new Array();
            for (var i=0, len=myDiv.style.length; i < len; i++)
            {
                var prop = myDiv.style[i];     //or myDiv.style.item(i)
                if(typeof myDiv.style.getPropertyCssValue == "function")
                {
                    var value = myDiv.style.getPropertyCSSValue(prop);
                    props.push(prop + " : " + value.cssText + " (" + value.cssValueType + ")"); 
                }
                else
                {
                    alert("there is no function about getPropertyCssValue");
                }
            }
            alert(props.join("\n"));
        }
        
        /**
         去除css的边框属性
        */
        function removeBorder()
        {
            var myDiv = document.getElementById("myDiv");
            myDiv.style.removeProperty("border");
        }
    </script>
</body>
</html>

 

 

posted @ 2016-07-28 10:58  cutter_point  阅读(98)  评论(0)    收藏  举报