<!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. FFmpeg中AVFrame.linesize的含义

    在第一节FFmpeg开发教程一.FFmpeg 版 Hello world中遇到一个问题,在保存YUV的时候,粗暴的使用: fwrite(buf, 1, xsize * ysize, f); 方式去拷贝 ...

  2. 机器学习之softmax回归笔记

    本次笔记绝大部分转自https://www.cnblogs.com/Luv-GEM/p/10674719.html softmax回归 Logistic回归是用来解决二类分类问题的,如果要解决的问题是 ...

  3. Golang_学习资料

    个人推荐: http://godeye.org/index.php?a=course&id=6 http://mikespook.com/learning-go/ http://coolshe ...

  4. error: snap "eclipse" has "install-snap" change in progress

    在Ubuntu 18.04使用snap安装eclipse软件报时错: inuxidc@linuxidc:~$ snap install --classic eclipse error: snap &q ...

  5. springboot 的启动流程

    1.我们springboot 项目的启动类如下. 方式1 @SpringBootApplicationpublic class SpringbootZkLockApplication { public ...

  6. Android SDK版本号 与 API Level 对应关系 201911

    API是开发用的,所以API LEVEL可以认为是内部的:而SDK的版本提供了新特性给用户,是外部可见的. 可以查看以下网址以获取最新的对应关系:  http://developer.android. ...

  7. Python之算法评估-4

    一.评估算法的方式分两种,一种是分类算法的评估,一种是回归算法的评估.为什么要分两种呢,因为分类算法中可以通过准确率.精准率.召回率.混淆矩阵.AUC来评估算法的准确度.但是在预测值的时候是没有办法去 ...

  8. 【转载】如何自己DIY组装一台台式电脑

    针对很多懂计算机的人员来说,有时候都希望自己DIY组装一台台式机,来达到自己的个性化要求以及省钱.其实自己DIY组装一台电脑也很简单,将相应的CPU处理器.主板.内存条.硬盘.固态硬盘.电脑机箱.屏幕 ...

  9. 【转载】 C#中使用Sum方法对List集合进行求和操作

    在C#的List操作中,有时候我们需要对List集合对象的某个属性进行求和操作,此时可以使用Lambda表达式中的Sum方法来快速实现此求和操作,使用Sum方法可使代码简洁易读,并且省去写for循环或 ...

  10. Java并发 行级锁/字段锁/表级锁 乐观锁/悲观锁 共享锁/排他锁 死锁

    原文地址:https://my.oschina.net/oosc/blog/1620279 前言 锁是防止在两个事务操作同一个数据源(表或行)时交互破坏数据的一种机制. 数据库采用封锁技术保证并发操作 ...