解决方法：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. Python使用selenium模拟点击(一)

    本文适合有点Python基础阅读,(没基础的话,相对的比较蒙蔽,争取能让小白能一步一步跟上来) 2019-03-05 14:53:05 前几天由于需要到一个网站进行签到~~听说Python能够模拟请求 ...

  2. PAT Basic 1050 螺旋矩阵 (25 分)

    本题要求将给定的 N 个正整数按非递增的顺序,填入“螺旋矩阵”.所谓“螺旋矩阵”,是指从左上角第 1 个格子开始,按顺时针螺旋方向填充.要求矩阵的规模为 m 行 n 列,满足条件:m×n 等于 N:m ...

  3. Ubuntu系统---C++之Eclipse编译器 CDT插件安装

                                                                                         Ubuntu系统---Ecli ...

  4. Jmeter练习

    首页 新随笔 管理   Jmeter接口测试实例-牛刀小试   本次测试的是基于HTTP协议的接口,主要是通过Jmeter来完成接口测试,借此熟悉Jmeter的基本操作. 本次实战,我是从网上找的接口 ...

  5. python3 虚拟环境

    一.python中的虚拟环境 1.虚拟环境:局部的,独立的python环境,完全模拟系统全局python环境的使用 二.安装 http://virtualenv.pypa.io/en/latest/u ...

  6. [WebMethod]参数介绍

    一.WebService的调试 net 2.0新建webservice为了安全考虑,默认关闭了Post和Get方法 .让其打开,可在Web.config文件的<system.web>下增加 ...

  7. 从list引用调用arraylist和linkedlist对象的方法了解多态

    一.前言 今天和朋友在写代码时突然发现List<object>  list=new ArrayList<object>()中,前面是通过List引用来调用其子类ArrayLis ...

  8. python 获取运行脚本和模块的绝对路径

    方法一:sys.args[0] 在python的运行时,sys.argv[0],存了当前脚本的运行路径包括文件名 python test.py 则:sys.argv[0] =>test.py p ...

  9. flutter 编译报错 ../extended_network_image_provider.dart:63:41: Error: Type 'DecoderCallback' not found

    flutter 编译的时候报错 Compiler message:../../../.pub-cache/hosted/pub.dartlang.org/extended_image_library- ...

  10. 51nod 1843 排列合并机（DP+组合）

    题解链接 不过求ggg不用O(n2)DPO(n^2)DPO(n2)DP,g[n]g[n]g[n]直接就是卡特兰数的第n−1n-1n−1项.即: g[n]=(2(n−1)n−1)−(2(n−1)n−2) ...