码迷,mamicode.com
首页 > Web开发 > 详细

DOM设置css样式

时间:2019-12-14 20:45:19      阅读:306      评论:0      收藏:0      [点我收藏+]

标签:bootstrap   round   深入浅出   one   str   red   背景   gre   span   

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>DOM设置css样式</title>
    <!-- 
        p.style.fontSize=100px;
        解读:
        设置元素p的样式字体大小=100px;
        样式属性不能有“-”符号,要写出驼峰形式

        切记,除了getElementById获取到的元素,其他都要通过数组x[i]的索引来对其设置样式,不论获取到的有几个
     -->
</head>
<body>
    <h3 id="h">前端书籍</h3>
    <ul id="listWeb">
        <li>html基础</li>
        <li>CSS基础</li>
        <li>JavaScript基础</li>
        <li>Jquery框架</li>
        <li>bootStrap框架</li>
    </ul>
    <h3>JAVA书籍</h3>
    <ul id="listJava">
        <li>JAVA语言基础</li>
        <li>三大框架</li>
        <li>JAVA深入浅出</li>
    </ul>
<script>
    var x=document.getElementById("h");//使用变量x获取id=h的h3
    x.style.color="blue";//id方法获取的是唯一的,无需使用数组索引
    var y=document.getElementsByTagName("h3");//使用变量y获取h3元素
    y[1].style.color="red";//数组索引第二个h3并设置样式
    var a=document.getElementById("listWeb").getElementsByTagName("li");//使用变量a获取所有前端书籍
    for (var i=0;i<=a.length;i++){//使用循环遍历所有前端书籍
        a[i].style.fontStyle="italic";//将所有前端书籍设置斜体
        if (i==2){
            a[i].style.color="green";//将第二个设置字体颜色为绿色
            a[i].style.listStyle="none";//将第二个前面的黑点删除
        }else{
            a[i].style.backgroundColor="grey";//将其他的设置背景颜色为灰色
        }
    }
</script>
</body>
</html>

DOM设置css样式

标签:bootstrap   round   深入浅出   one   str   red   背景   gre   span   

原文地址:https://www.cnblogs.com/vinson-blog/p/12040682.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!