实例代码 - 手册网

实例代码“Ctrl+/”提示“F11/ESC”全屏返回格式化恢复运行

<!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">
        function changeStyles(){
            var myDiv = document.getElementById("myDiv");
            
            //set the background color
            myDiv.style.setProperty("background-color", "red", "");;
            
            //change the dimensions
            myDiv.style.setProperty("width", "100px", "");
            myDiv.style.setProperty("height", "200px", "");
            
            //assign a border
            myDiv.style.setProperty("border", "1px solid black", "");
        }
        
        function getStyles(){
            var myDiv = document.getElementById("myDiv");
            alert(myDiv.style.getPropertyValue("background-color"));
            alert(myDiv.style.getPropertyValue("width"));
            alert(myDiv.style.getPropertyValue("height"));
        }
        
        function getCSS(){
            var myDiv = document.getElementById("myDiv");
            alert(myDiv.style.cssText);
        }
        
        function changeCSS(){
            var myDiv = document.getElementById("myDiv");
            myDiv.style.cssText ="width: 25px; height: 100px; background-color: green";
        }

​x
 
<!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">
        function changeStyles(){
            var myDiv = document.getElementById("myDiv");
            
            //set the background color
            myDiv.style.setProperty("background-color", "red", "");;
            