<!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. Python-01-编程语言简介

    一.编程与编程语言 1. 编程的目的 计算机的发明,是为了用机器取代/解放人力,而编程的目的则是将人类的思想流程按照某种能够被计算机识别的表达方式传递给计算机,从而达到让计算机能够像人脑/电脑一样自动 ...

  2. PAT(B) 1079 延迟的回文数（Java）

    题目链接:1079 延迟的回文数 (20 point(s)) 题目描述 给定一个 k+1 位的正整数 N,写成 a​k​​⋯a​1​​a​0​​ 的形式,其中对所有 i 有 0≤a​i​​<10 ...

  3. TCP，SYN，FIN扫描

    1.TCP扫描相对来说是速度比较慢的一种,为什么会慢呢?因为这种方法在扫描的时候会从本地主机的一个端口向目标主机的一个端口发出一个连接请求报文段,而目标主机在收到这个这个请求报文后: 有回复: 若同意 ...

  4. PowerBuilder学习笔记之8.5高级窗口控件

    1.列表框控件 列表框控件(ListBox).图片列表框控件(PictureListBox).下拉列表框控件(DropDownListBox)以及下拉图片列表框控件(DropDownPictureLi ...

  5. 在ubuntu 16.04 的vm中添加新网卡，同一网段不同ip

    在ubuntu 16.04 的vm中添加新网卡,同一网段不同ip 来源 https://blog.51cto.com/744478/2083672 在ubuntu 16.04 的vm中新加了一块网卡, ...

  6. Bigdecimal除法异常

    1.异常信息摘要(详细请见文末): java.lang.ArithmeticException: Non-terminating decimal expansion; no exact represe ...

  7. R_数据视觉化处理_中阶_05

    条形图:条形图通过垂直或水平的条形展示了类型变量的分布(频数).最简单的用法为:barplot(height),height为矩阵或向量. horiz=TRUE选项:表示水平,在此之前先使用table ...

  8. Qt布局

    常用的布局方法 1. 水平布局类 QHBoxLayout 2. 垂直布局类 QVBoxLayout 3. 网格布局类 QGridLayout QHBoxLayout 对象横向排列开 QVBoxLayo ...

  9. sed 追加文件内容

    追加用法总结 1.a 在匹配行后面追加 2.i 在匹配行前面追加 3.r 将文件内容追加到匹配行后面 4.w 将匹配行写入指定文件 在匹配行后面追加 a passwd文件第10行后面追加"A ...

  10. 对于Linux中文件描述符的疑问以及解决

    问题 ​ 每次web服务器或者是几乎所有Linux服务器都需要对文件描述符进行调整,我使用ulimit -n来查看当前用户的最多能打开的文件,默认设置的是1024个,但是系统运行起来以及开启一些简单的 ...