解决方法：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. nc 命令

    目录 nc 命令 一.简介 二.案例 1.端口扫描 2.聊天 3.文件传输 4.目录传输 5.加密网络发送的数据 6.流视频 7.克隆一个设备 8.打开一个shell 9.反向shell 10.指定端 ...

  2. Linux脑洞——怎么知道我这个Linux是啥时候开的机？

    生产环境上,Linux服务器肯定不能随便重启,到底啥时候开的机,这个问题真没啥讨论价值.但是自己在WMWare Workstation下装虚拟机不一样 who -b

  3. selenium 操作多个窗口间切换

    #coding=gbk ''' selenium多个窗口间切换 ''' from selenium import webdriver as wd from selenium.webdriver imp ...

  4. 问题 C: 如沫春风 ---有毒的gets（），新OJ不能用！用scanf（%s）读入即可！——ZZNU新OJ

    问题 C: 如沫春风 时间限制: Sec 内存限制: MB 提交: 解决: [提交] [状态] [讨论版] [命题人:admin] 题目描述 月亮很亮,亮也没用,没用也亮. 我喜欢你,喜欢也没用,没用 ...

  5. WCF错误处理

    介绍 WCF(Windows Communication Foundation) -异常处理:一般Exception的处理,FaultException和FaultException<T> ...

  6. Display Tag Lib Table进行分页

    Display Tag Lib是一个标签库,用来处理jsp网页上的Table,功能非常强,可以对的Table进行分页.数据导出.分组.对列排序等等,反正我在做项目时需要的功能它都给我提供了,而且使用起 ...

  7. 为什么添加了@Aspect 还要加@Component(转)

    官方文档中有写: You may register aspect classes as regular beans in your Spring XML configuration, or autod ...

  8. mybatis-plus 相关

    这里有几个很全的教程: https://www.cnblogs.com/okong/p/mybatis-plus-guide-one.html mybtais-plus学习--BaseMapper提供 ...

  9. 出现错误时返回异常 MVC

    在使用MVC的时候,会出现异常提醒: 1,当在Controller出现错误的时候,我们可以直接返回,即return  view()返回视图. ViewBag.Msg("产品或赠品不存在&qu ...

  10. word如何选择图片粘贴

    自动导入Word图片,或者粘贴Word内容时自动上传所有的图片,并且最终保留Word样式,这应该是Web编辑器里面最基本的一个需求功能了.一般情况下我们将Word内容粘贴到Web编辑器(富文本编辑器) ...