<!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. 数组模拟循环队列（java实现）

    1.front变量的含义:front就指向队列的第一个元素,也就是说arr[front]就是队列的第一个元素front的初始值=0. 2.rear变量的含义:rear指向队列的最后一个元素的后一个位置 ...

  2. CH08 QSPI启动并从EMMC运行APP

    8.1 概述 在前一节课,我们必须手动挂载TF卡到mnt,然后输入./a.out程序才能启动.而在嵌入式系统里面,我们很多时候需要实现开机启动程序.很多时候我们会把程序固化到FLASH,然后从EMMC ...

  3. 案例（1）-- OOM异常

    问题描述: 1.系统在执行某个操作时,必现OOM异常. 问题的定位: 1.排查代码,未发现问题. 2.在虚拟机启动时,添加参数:-XX:+HeapDumpOnOutOfMemoryError(当发生o ...

  4. Effective Java 读书笔记（一）：创建和销毁对象

    1 构造器 => 静态工厂方法 (1)优势 静态工厂方法有名字 静态工厂方法不必在每次被调用时都产生一个新的对象 静态工厂方法能返回原返回类型的任意子类型的对象 静态工厂方法根据调用时传入的不同 ...

  5. PMBOK项目管理的五大过程组和十大知识领域

    PMBOK五大过程组是:启动过程.规划过程.执行过程.监控过程.收尾过程. 各用一句话概括项目管理知识体系五大过程组: 1.启动过程组:作用是设定项目目标,让项目团队有事可做: 2.规划过程组:作用是 ...

  6. Python基本数据类型及实例详解

    Python 中的变量不需要声明.每个变量在使用前都必须赋值,变量赋值以后该变量才会被创建. 在 Python 中,变量就是变量,它没有类型,我们所说的"类型"是变量所指的内存中对 ...

  7. Java集合源码阅读之HashMap

    基于jdk1.8的HashMap源码分析. 引用于:http://blog.stormma.me/2017/05/31/Java%E9%9B%86%E5%90%88%E6%BA%90%E7%A0%81 ...

  8. 将py文件打包到docx

    import os class FileDownload: def __init__(self): self.exclude = ['db.sqlite3', 'logs', 'media', 'Pi ...

  9. 【转载】C#通过IndexOf方法判断某个字符串是否包含在另一个字符串中

    C#开发过程中针对字符串String类型的操作是常见操作,有时候需要判断某个字符串是否包含在另一个字符串,此时可以使用IndexOf方法以及Contain方法来实现此功能,Contain方法返回Tru ...

  10. JavaScript内置一些方法的实现原理--new关键字，call/apply/bind方法--前戏

    new关键字,call/apply/bind方法都和this的绑定有关,在学习之前,首先要理解this. 一起来学习一下this吧 首先.this是一个对象. 对象很好理解,引用类型值,可以实现如th ...