<!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. LeetCode 278. 第一个错误的版本(First Bad Version)

    278. 第一个错误的版本 LeetCode278. First Bad Version 题目描述 你是产品经理,目前正在带领一个团队开发新的产品.不幸的是,你的产品的最新版本没有通过质量检测.由于每 ...

  2. （4）Spring Boot Web开发---静态资源

    文章目录 对静态资源的映射规则 模板引擎 Thymeleaf 使用 & 语法 使用之前将的快速创建项目的方法,勾选我们需要的场景,这里我需要 web --> web.sql --> ...

  3. C++语法笔记（上）

    客观事物中任何一个事物都可以看成一个对象,对象是由一组属性和一组行为构成的. c++中,每个对象都是由数据与函数这两部分构成,数据就是对象的属性,函数就是对象的行为. c++中对象的类型称为类,类是一 ...

  4. Linux基础-06-vi编辑器

    1. vi编辑器简介 1) vi的定义:vi是一个UNIX和Linux系统内嵌的标准正文(文字)编辑器,它是一种交互类型的正文编辑器,它可以用来创建和修改正文文件. 2. vi编辑器的操作模式 vi编 ...

  5. Django REST framework 基本组件

    一.序列化组件 简单使用 开发我们的Web API的第一件事是为我们的Web API提供一种将代码片段实例序列化和反序列化为诸如json之类的表示形式的方式.我们可以通过声明与Django forms ...

  6. TZOJ3114: {A}∩{B}

    #include<stdio.h> int main() { ],b[],m,i,j,c; scanf("%d",&t); while(t--) { c=; s ...

  7. VMWare linux虚拟机（centos没有GUI）联网（NAT模式）

    使用yum list命令查看是否能连上网. 不能联网,需要对centos进行网络配置.但在此之前,需要: 1. 虚拟机网络连接方式设置成NAT. 2. window系统下的两个服务VMwareDHCP ...

  8. Tomcat HTTP connector和AJP connector

    Tomcat服务器通过Connector连接器组件与客户程序建立连接,“连接器”表示接收请求并返回响应的端点.即Connector组件负责接收客户的请求,以及把Tomcat服务器的响应结果发送给客户. ...

  9. zabbix 数据库分表操作

    近期zabbix数据库占用的io高,在页面查看图形很慢,而且数据表已经很大,将采用把数据库的数据目录移到新的磁盘,将几个大表进行分表操作 一.数据迁移: 1.数据同步到新的磁盘上,先停止mysql(不 ...

  10. [v]Linux下安装Git

    Ubuntu12.04中默认没有安装Git.需要自行安装. 1. 安装Git 1.1 Ubuntu12.04下 可以使用apt-get方式安装,也可以下载源代码安装[1],我们这里使用apt-git安 ...