D

DOM---改变HTML样式,显示和隐藏（display属性），控制类名（className 属性）

Yranky Dou 学习足迹 2019-10-03

1.改变HTML样式
语法:

Object.style.property=new style;

注意:Object是获取的元素对象。
例

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>document.getElementById</title>
</head>
<body>
<p id="pcon">Hello World!</p>
<script>
   var mychar = document.getElementById("pcon");
   mychar.style.color="red";
   mychar.style.fontSize="20";
   mychar.style.backgroundColor ="blue";
</script>
</body>
</html>

2.显示和隐藏（display属性）
语法：

Object.style.display = value    //value有两个取值，none（隐藏）和block（显示为块级元素）

注意:Object是获取的元素对象，如通过document.getElementById("id")获取的元素。
例

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>document.getElementById</title>
</head>
<body>
 <script type="text/javascript"> 
        function hidetext()  
        {  
        document.getElementById("con").style.display="none"
        
        }  
        function showtext()  
        {  
        document.getElementById("con").style.display="block"
        
        }
    </script> 
    <p id="con">JavaScript</p>
    <input type="button" onclick="hidetext()" value="隐藏的"/>
    <input type="button" onclick="showtext()" value="显示的"/>
</body>
</html>

出现两个按钮，并且默认为显示，点击按钮即可显示或隐藏文本
等效

<script type="text/javascript"> 
        function hidetext()  
        {  
        var mychar = document.getElementById("con");
        mychar.style.display="none"
        }  
        function showtext()  
        {  
        var mychar = document.getElementById("con");
        mychar.style.display="block"
        }
    </script>

3.控制类名（className 属性）
className 属性设置或返回元素的class 属性。

语法：

object.className = classname

作用:
1.获取元素的class 属性

  1. 为网页内的某个元素指定一个css样式来更改该元素的外观
    即更改class类名，实现css的更改
    例

    <!DOCTYPE HTML>



    className属性