怎么通过原生JS改变元素的class属性
解决方法: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属性的更多相关文章
- 原生JS给元素添加class属性
有下面这三种简单语句. document.getElementsByTagName('body')[0].className = 'snow-container'; //设置为新的 document ...
- 原生js获取元素的样式信息
工作中经常会需要获取DOM元素的样式,之前都是通过jquery的css()方法,现在总结一下通过原生js获取元素样式的方法. obj.style js var _width = obj.style.w ...
- 原生js获取元素样式
摘要: 我们在开发过程中经常会遇到通过js获取或者改变DOM元素的样式,方法有很多,比如:通过更改DOM元素的class.现在我们讨论原生js来获取DOM元素的CSS样式,注意是获取不是设置 在开始之 ...
- Raphael.js改变元素层叠顺序
Raphael.js 元素(Element)改变层叠顺序,Raphael.js是一个矢量绘图库兼容svg和vml.初学时感觉css的z-index能搞定,结果是不支持,不过矢量绘图符合dom标准.可以 ...
- 原生JS获取元素宽高实践详解
开篇的话 任何不是亲身实践中求得的知识,都不是属于你的.任何求得的知识不去时常温习运用,也不是属于你的. 记录由来 在做个上拉广告功能中遇到了一个"理所当然"觉得对的用法,慢慢才排 ...
- JavaScript DOM查询,原生js实现元素子节点的获取
在网页网页开发中,经常会需要获取某个网页元素的子元素,然后对其进行事件绑定.或样式修改等行为.这些操作对于jquery来说很容易,但是对于原生js会稍微麻烦一些,这里将介绍四种方法获取元素的子元素(本 ...
- 原生JS获取元素集合的子元素宽度
有些时候,在一个网页的ul li中,存在左右两个部分的内容,但是右边元素内容又是不固定,左边元素相对应的不能用固定宽度,所有需要我们动态的获取右边元素宽度,来赋值给左边元素的marginRight值. ...
- 原生JS查找元素
今天写了一个很简单.很粗暴的通过JS根据类来查找DOM元素. 为了降低它的粗暴等级(耗费性能)我给了三个等级. 首先性能最好的,适合FF,CH,IE8,通过querySelectorAll这个API. ...
- 原生js获取元素的子元素
//使用firstChild //但是下面这种因为有空格,也算其子元素 <lable> <span id="onlinePerson" name="pe ...
随机推荐
- Centos7下安装Elasticsearch 5.6.6
环境 因为elasticsearch是用java编写的,所以需要先安装JDK ES 5,安装需要 JDK 8 以上ES 6.5,安装需要 JDK 11 以上ES 7.2.1,内置了 JDK 12 安装 ...
- 转: Javascript收藏
搜集的一些javascript小技巧! 事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.set ...
- Java基础 @org.junit.Test-单元测试方法 + 操纵Collection和Map的工具类 : Collections 的sort/binarySearch/max/min等静态方法
单元测试代码: ( 在IDEA中先输入'@Test '然后根据提示进行自动修订即可!!运行时直接运行即可! 若有多个单元测试块的时候,直接把鼠标放在哪里就自动在哪里运行那个单元块) import ...
- Angular4的dom事件
Angular4的dom事件 差值表达式和属性绑定其实是一样的(例) <!-- 这两个是一样的效果,使用哪个都可以 --> <img src="{{imgUrl}}&quo ...
- validatebox自定义验证规则以及使用
//===============jsp======state==== //开启验证 <script type="text/javascript"> y ...
- 基于 C++ 的脚本语言 cpps 脚本
cpps 脚本是一个基于 C++ 的脚本语言. 基础语法: if&else 接口说明 根据括号中数据判断执行相关代码. 代码演示 var i = toint(io.getc()); if(i ...
- 04_mysql安装
# 安装 [root@localhost ~]# yum install mysql mysql-server -y 报错 [root@ossec-server ~]# yum install mys ...
- 【题解】丑数Humble Numbers-C++
题目描述Description对于一给定的素数集合 S = {p1, p2, …, pK},如果一个数字,当我们对其做完质因子分解后,其质因子全是来自我们给定的素数集合,则认为这个数字是个丑数.注意: ...
- ueditor批量上传word图片
图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的base64码目前限chrome浏览器使用首先以um-editor的二进制流保存为例:打开umeditor.js,找到UM ...
- c实现队列
使用链表实现队列的入队和出队 #include <iostream> #include <stdio.h> #include <string.h> #include ...