解决方法：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. 【2017-06-29】在登录页面自动返回上次请求页面、Js获取table中的行数与列数

    一.在登录页面自动返回上次请求页面 Request.UrlReferrer比如 if (Request.UrlReferrer != null) { //如果能获取来路地址 Response.Redi ...

  2. idou老师教你学Istio12 : Istio 实现流量镜像

    微服务为我们带来了快速开发部署的优秀特性,而如何降低开发和变更的风险成为了一个问题.Istio的流量镜像,也称为影子流量,是将生产流量镜像拷贝到测试集群或者新的版本中,在引导实时流量之前进行测试,可以 ...

  3. Codeforces 567C - Geometric Progression - [map维护]

    题目链接:https://codeforces.com/problemset/problem/567/C 题意: 给出长度为 $n$ 的序列 $a[1:n]$,给出公比 $k$,要求你个给出该序列中, ...

  4. java- 泛型类到底是类还是接口，<T extends Comparable>的写法中为什么没有用implements

    java-core P533 public static <T extands Comparable> T min(T[] a ) 这里产生了一个疑问,就是 泛型类的英文是generic ...

  5. 验证码输入自动聚焦下一个input或者删除自动聚焦上一个input

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. input 更改 pleaseholder 的字体样式

    /* WebKit browsers */input::-webkit-input-placeholder {    color: red;    font-size: 14px;}/* Mozill ...

  7. Angular4的dom事件

    Angular4的dom事件 差值表达式和属性绑定其实是一样的(例) <!-- 这两个是一样的效果,使用哪个都可以 --> <img src="{{imgUrl}}&quo ...

  8. 2018web前端面试题总结

      web面试题 css面试 一.css盒模型 css中的盒子模型包括IE盒子模型和标准的W3C盒子模型.border-sizing: border-box, inherit, content-box ...

  9. 发现sqlite

    1.前言 本文使用"发现"二字,是表示我作为一个用过mysql oracle hive以及各种nosql数据库的男人,竟然发现有一个如此常识的数据库我竟然不知道. 在配置airfl ...

  10. BZOJ 4013/Luogu P3240 [HNOI2015] 实验比较 （树形DP）

    题目传送门 分析 放一个dalao博客: xyz32768 的博客,看完再回来看本蒟蒻的口胡吧(其实嘛-不回来也行) 精髓是合并的方案数的计算,至于为什么是Ci−1j−1\large C_{i-1}^ ...