解决方法：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. linux(centos)下安装supervisor进程管理工具

    在接触supervisor进程管理工具之前,使用springboot打包部署到linux服务器的流程是这样子的,如下图所示: 上图展示的就是最一般的流程,如果项目是小项目或者demo可以这样子去部署, ...

  2. win10锁屏壁纸文件夹Assets中无文件问题的解决方法

    一.前言 win10在锁屏时会有很多精美的壁纸,在网上查找到win10锁屏壁纸存放目录为 : C:\Users\你的用户名\AppData\Local\Packages\Microsoft.Windo ...

  3. Exams（二分

    题意:给你每天要考的科目,和每门科目需要复习多长时间,问最少需要几天才能完成所有的考试. 思路:二分答案,然后判断答案是否可行,这边需要进行贪心,即倒着往前推, 比如第i天,那么前面有i-1天是,可供 ...

  4. Python多线程应用于自动化测试

    Python多线程应用于自动化测试 将多线程在测试巧妙地应用,确实会带来很多好处,并且这是充分利用机器资源执行高效率测试很好的方式 # -*- coding: utf-8 -*- import thr ...

  5. Java核心技术 卷一 复习笔记(丁

    面向对象1.面向对象设计概述 1.1.面向对象是什么 面向对象是一种程序设计范型(简称OOP),是针对对象进行开发,简化开发过程的一种设计方式 1.2.类 类是构造对象的模板,相当于一个烘焙模板,而对 ...

  6. window open（） 方法

    open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口. 语法 window.open(URL,name,specs,replace) 参数 说明 URL 可选.打开指定的页面的URL.如 ...

  7. oracle 给表字段把VARCHAR2 换成 CLOB

    select * from TableName -- 添加一个字段 alter table TableName add 字段2 clob; --复制数据到此字段update TableName set ...

  8. django中非菜单权限的归属

    非菜单权限的归属 :         1.设置表结构 : 在权限表中添加自连接的外键patent,parent_id连接permission表的id,可为空,当有parent_id时,说明它是一个普通 ...

  9. 2018HDU多校联赛第六场 6373 Pinball——水题&&物理题

    题意 给定一个斜面,从某处让一个小球作自由落体运动,求小球与斜面的碰撞次数(假设都为弹性碰撞). 分析 题图如下,x轴.y轴是虚拟的. 根据高中物理的套路,沿斜面方向分解重力加速度即可. #inclu ...

  10. [2019年湘潭大学程序设计竞赛（重现赛）H chat][背包dp]

    链接:https://ac.nowcoder.com/acm/contest/893/H来源:牛客网 题目描述 在Casya生活的世界里,一天由m个小时组成. 最近Casya的女神终于答应在接下来的n ...