解决方法：document.getElementById('test').className = 'emphasis'

Eg：

<!doctype html>

<html lang="zh-cn">

 <head>

  <meta charset="UTF-8">

  <title>Test</title>

  <style type="text/css">

    p {

    color: #; /* black */

    }

    p.emphasis {

    color: #cc0000; /* red */

    }

  </style>

 </head>

 <body>

    <p id="test">Test</p>

    <hr>

    <input type="button" value="修改className为emphasis" onclick="document.getElementById('test').className = 'emphasis';">

    <input type="button" value="修改className为空" onclick="document.getElementById('test').className = '';">

 </body>

</html>

怎么通过原生JS改变元素的class属性的更多相关文章

  1. 原生JS给元素添加class属性

     有下面这三种简单语句. document.getElementsByTagName('body')[0].className = 'snow-container'; //设置为新的 document ...

  2. 原生js获取元素的样式信息

    工作中经常会需要获取DOM元素的样式,之前都是通过jquery的css()方法,现在总结一下通过原生js获取元素样式的方法. obj.style js var _width = obj.style.w ...

  3. 原生js获取元素样式

    摘要: 我们在开发过程中经常会遇到通过js获取或者改变DOM元素的样式,方法有很多,比如:通过更改DOM元素的class.现在我们讨论原生js来获取DOM元素的CSS样式,注意是获取不是设置 在开始之 ...

  4. Raphael.js改变元素层叠顺序

    Raphael.js 元素(Element)改变层叠顺序,Raphael.js是一个矢量绘图库兼容svg和vml.初学时感觉css的z-index能搞定,结果是不支持,不过矢量绘图符合dom标准.可以 ...

  5. 原生JS获取元素宽高实践详解

    开篇的话 任何不是亲身实践中求得的知识,都不是属于你的.任何求得的知识不去时常温习运用,也不是属于你的. 记录由来 在做个上拉广告功能中遇到了一个"理所当然"觉得对的用法,慢慢才排 ...

  6. JavaScript DOM查询，原生js实现元素子节点的获取

    在网页网页开发中,经常会需要获取某个网页元素的子元素,然后对其进行事件绑定.或样式修改等行为.这些操作对于jquery来说很容易,但是对于原生js会稍微麻烦一些,这里将介绍四种方法获取元素的子元素(本 ...

  7. 原生JS获取元素集合的子元素宽度

    有些时候,在一个网页的ul li中,存在左右两个部分的内容,但是右边元素内容又是不固定,左边元素相对应的不能用固定宽度,所有需要我们动态的获取右边元素宽度,来赋值给左边元素的marginRight值. ...

  8. 原生JS查找元素

    今天写了一个很简单.很粗暴的通过JS根据类来查找DOM元素. 为了降低它的粗暴等级(耗费性能)我给了三个等级. 首先性能最好的,适合FF,CH,IE8,通过querySelectorAll这个API. ...

  9. 原生js获取元素的子元素

    //使用firstChild //但是下面这种因为有空格,也算其子元素 <lable> <span id="onlinePerson" name="pe ...

随机推荐

  1. 02.python网络爬虫第二弹(http和https协议)

    一.HTTP协议 1.官方概念: HTTP协议是 Hyper Text Transfer Protocol(超文本传输协议)的缩写,是用于从万维网(www.world wide web) 服务器传输超 ...

  2. SQL server 语句执行分析

  3. 导弹拦截( 二分+dilworth定理）

    https://www.luogu.org/problemnew/show/P1020 原题 接下来是dilworth定理 https://blog.csdn.net/u011676717/artic ...

  4. ELK---- Elasticsearch 安装 学习

    elk  = 分布式系统收集管理多台服务器日志,并能快速做增删改查操作的几个工具集合简称. elasticsearch(存储日志)+logstash(收集日志)+kibana(展示数据) 在linux ...

  5. linux mint 19 打开 Windows 下制作的 TXT 文件时‘乱码’

    因为 Linux 采用的是 UTF-8 编码,Windows 的中文编码是 GB18030. 解决的办法:让 Linux 的文本编辑器支持 GB18030 1.我们安装一个小软件"Dconf ...

  6. 慕课网SSM仿大众点评

    目录: 配置部分: 1 配置报错不支持diamond运算符 运行部分: 1 登录的账号密码 2 运行项目是报错session超时 配置部分 1 配置报错不支持diamond运算符 原报错信息如下:id ...

  7. 001_Python安装

    1. 判断电脑是否已经安装python,电脑->运行->输入:python 2. 如果没有安装,去官网下载:https://www.python.org/downloads/ 3. 安装过 ...

  8. @Component,@Service,@Controller,@Repository

    1.@controller 控制器(注入服务) 2.@service 服务(注入dao) 3.@repository dao(实现dao访问) 4.@component (把普通pojo实例化到spr ...

  9. [POI2010]MOT-Monotonicity 2

    洛谷题目链接 动态规划$+$线段树 题目链接(洛谷) 首先,先要明确一点,当我们填了第$i$位时,自然下一位的符号也就出来了 那么我们可以分情况讨论: $1.$当下一位是$>$时:我们可以建一棵 ...

  10. Comet OJ - Contest #13 「佛御石之钵 -不碎的意志-」(困难版) 并查集

    题意 给一个$ n \times m$ 的网格,每个格子里有一个数字,非 \(0\) 即 \(1\),行从上往下依次编号为 \(1, 2, \cdots, n\),列从左往右依次编号为 \(1, 2, ...