<!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样式的更多相关文章

  1. JS设置CSS样式的几种方式

    用JS来动态设置CSS样式,常见的有以下几种 1. 直接设置style的属性  某些情况用这个设置 !important值无效 如果属性有'-'号,就写成驼峰的形式(如textAlign)  如果想保 ...

  2. js设置css样式.

    在js设置css样式做法 var obj = document.getElementById('div'); obj.style.width = '100px'; obj.style.height = ...

  3. 关于jquery中用函数来设置css样式

    关于jquery中用函数来设置css样式 2016-12-21 23:27:55 1.jquery语法 $(selector).css(name,function(index,value)) name ...

  4. DOM与CSS样式表

    在前文 <DOM与元素节点内联样式>中我们了解了用 DOM 提供的接口操作元素节点内联样式的方法,今天我们来学习一下如何用 DOM 操作 CSS 样式表. CSS 样式表概况 通过使用 H ...

  5. JS设置CSS样式的几种方式【转】

    用JS来动态设置CSS样式,常见的有以下几种 1. 直接设置style的属性  某些情况用这个设置 !important值无效 如果属性有'-'号,就写成驼峰的形式(如textAlign)  如果想保 ...

  6. cssText设置css样式

    js中用cssText设置css样式 (2012-08-21 10:40:22) 转载▼ 标签: js   如果网页中一个 id为“no”的标签,暂且当div标签来tell:想要在js中设置这个div ...

  7. 3.通过js代码设置css样式

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 5、通过js代码设置css样式

    1.页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

  9. react学习(四)之设置 css样式 篇

    react中设置css样式 方法一: 行内样式:使用{{  }},与正常jsx中插入js代码不一样,这里需要两个括号. <div style={ { float: 'right',} }> ...

随机推荐

  1. [转帖]Docker Hub上镜像发现挖矿蠕虫病毒，已导致2000台主机感染

    Docker Hub上镜像发现挖矿蠕虫病毒,已导致2000台主机感染 https://www.kubernetes.org.cn/5951.html 本来想说可以用 official版本的镜像 但是一 ...

  2. K8S从入门到放弃系列-(13)Kubernetes集群mertics-server部署

    集群部署好后,如果我们想知道集群中每个节点及节点上的pod资源使用情况,命令行下可以直接使用kubectl top node/pod来查看资源使用情况,默认此命令不能正常使用,需要我们部署对应api资 ...

  3. 开始使用 Ubuntu（字体渲染去模糊+软件安装+优化配置+常见错误）(29)

    1. 中文字体渲染美化 + 去模糊 步骤: 1. 解压安装 lulinux_fontsConf_181226.tar.gz,按里面的安装说明操作: 2. 开启字体渲染: 打开 unity-tweak- ...

  4. WUSTOJ 1299: 结点选择（Java）

    题目链接:

  5. Python学习路线2019升级版（课程大纲+视频教程+网盘资源下载）

    2019最新Python全栈+人工智能学习路线升级版 全面涵盖前端.后端.爬虫.数据挖掘.人工智能等课程(课程大纲+视频教程+网盘资源下载)! 学习路线四大亮点: 1.人工智能三大主流框架全覆盖 2. ...

  6. try except 异常捕获的方法、断言的使用

    except as e中的'e'的作用总结 - 2puT - CSDN博客 Python使用try except处理程序异常的三种常用方法分析 Python3和Python2 异常处理except的不 ...

  7. SAS学习笔记54 RTF文件格式

    Style RTF Control Word Example Code Italicize \i title '\i italicized title'; Underline \ul title '\ ...

  8. Kafka 的这些原理你知道吗

    如果只是为了开发 Kafka 应用程序,或者只是在生产环境使用 Kafka,那么了解 Kafka 的内部工作原理不是必须的.不过,了解 Kafka 的内部工作原理有助于理解 Kafka 的行为,也利用 ...

  9. 爬虫相关--requests库

    requests的理想:HTTP for Humans 一.八个方法 相比较urllib模块,requests模块要简单很多,但是需要单独安装: 在windows系统下只需要在命令行输入命令 pip ...

  10. VBA子程序（十六）

    子程序(Sub Procedures,也叫子过程)与函数类似,但有一些差异. 子过程不需要有返回一个值,而函数可能会或可能不会有返回一个值. 子程序可以不用call关键字来调用. 子程序总是包含在Su ...