Dom修改元素样式
提纲：我们可以通过js来修改元素的大小，颜色，位置等样式
1.element.style 行内样式的操作
2.element.className 可以获取元素的class名称
3.element.setAttribute("type","button"); 获取元素修改元素的行内样式
4.insertRule(rule,index) .document.styleSheets[0]用来获取外部样式表！ 使用myStyle.insertRule在外部样式表中插入styleCss规则
定义和用法insertRule() 方法在样式表中插入一条规则。返回值参数 index 的值。addRule() 方法向样式表插入一条规则，该方式是特定于 IE 的方法。
| 参数 | 描述 |
|---|---|
| rule |
必需。要添加到样式表的规则的完整的、可解析的文本表示。
|
| index | 必需。要把规则插入或附加到 cssRules 数组中的位置。 |
5. addRule(selector,style,index).document.styleSheets[0]用来获取外部样式表！使用addRule修改伪类外部cssStyle的样式
描述该方法在样式表的 rules 数组的指定 index 处插入（或附加）一条新的 CSS 样式规则。这是标准 insertRule() 方法的特定于 IE 的替代。
| 参数 | 描述 |
|---|---|
| selector | 必需。规则的 CSS 选择器。 |
| style |
必需。应用于匹配该选择器的元素的样式。 这个样式字符串是一个分号隔开的属性：值对的列表。并没有使用花括号开始或结束。 |
| index |
可选。规则数组中插入或附加规则的位置。 如果这个可选参数被省略掉，则新的规则会增加到规则数组的最后。 |
一.element.style 获取元素进行内样式的操作
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
div{
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div id="a1"></div>
<script type="text/javascript">
var a1 = document.getElementById("a1")
a1.onclick = function(){
a1.style.backgroundColor = "blue";
}
</script>
</body>
</html>
点击过后改变style的样式是因为style的内联权重比外联样式的权重高所以会改变
二.element.className类名样式操作可以获取到element中的class="类名"
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body id="myid" class="mystyle"> <script>
var x=document.getElementsByTagName('body')[];
document.write("Body 元素 CSS 类为: " + x.className);
document.write("<br>");
document.write("另一种方式: ");
document.write(document.getElementById('myid').className);
</script> </body>
</html>
三四五.方法都写在下方同一个例子之中看一看实际中该如何运用！（微信红心点赞效果）
下面是代码：用css创建一个红心然后利用dom添加样式！
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style type="text/css">
div{
position:relative;
margin:200px auto;
width: 300px;
height:270px;
/*background: red;*/
animation: mymove 1s linear;
}
div:before
{
content: "";
position: absolute;
left: 150px;
width: 150px;
height: 240px;
background: blue;
border-radius: 150px 150px 15px 15px;
transform-origin: %;
transform: rotate(-45deg); }
div:after{
content: "";
position: absolute;
left: 0px;
width: 150px;
height: 240px;
background: blue;
border-radius: 150px 150px 15px 15px;
transform-origin: % %;
transform: rotate(45deg); } </style>
</head> <body>
<div id="a1" class="a"></div> <script type="text/javascript">
// 获取到外部css中的样式需要后面添加[数组]用来准确的获取哪一个外部样式
var a1 = document.styleSheets[];
var id = document.getElementById("a1")
document.onclick = function(){
// 这个方法用于给element添加行内样式(内嵌样式)
id.setAttribute("style","border:10px solid pink;");
// 这个方法用于操纵外部样式表中的选择器 并且也可以改变外部样式表伪类选择器里面的值,注意！外部样式权重比例要低于内联样式
a1.addRule('div::before','background: green; color:red; ');
a1.addRule('div::after','background: green; color:red; ');
// insertRule方法可以在外部样式表中添加一条Css规则
a1.insertRule("@keyframes mymove{0%{transform: scale(1);}50%{transform: scale(1.2);opacity: 0.8;}100%{transform: scale(1);}}",);
}
</script>
</body>
</html>
这个是点击之后的效果并带有动画！
为了方便将例子都写在一起了QAQ希望大家支持
Dom修改元素样式的更多相关文章
- js中cssText批量修改元素样式
平常编写代码,更改一个元素样式的时候,自己都是用 obj.style.width = "200px"; obj.style.position = "absolute&qu ...
- DOM访问元素样式和操作元素样式
在HTML中定义样式的方式有三种:通过<link/>元素包含外部样式表文件(外部样式表).使用<style/>元素定义嵌入式样式(嵌入式样式表).使用style特性定义针对特定 ...
- DOM修改元素的方法总结
今天我们要谈谈DOM元素的修改(包括修改内容,属性,样式).修改内容的方法----3种:elem.innerHTML:获取或设置元素开始标签到结束标签之间的原始HTML代码片段:elem.textCo ...
- DOM获取元素、修改元素
## DOM获取元素.修改元素### 1.DOM#### ①什么是DOM?作用? > DOM是文档对象模型 > 作用:操作网页内容,可以开发网页内容特效和实现用户交互.#### ②DOM对 ...
- JavaScript 读取修改元素 及 伸拉门案例
JavaScript 读取修改元素 及 伸拉门案例 版权声明:未经授权,严禁转载! 读取 / 修改元素 - 读取修改元素内容 - 读取修改元素属性 - 读取修改元素样式 元素的内容 读取或修改元素节点 ...
- js 修改页面样式的两种方式
1. element.style 行内样式操作 代码示例 : <!DOCTYPE html> <html lang="en"> <hea ...
- react项目中对dom元素样式修改的另一种方法以及将组件插入到node节点中
在项目中,以前如果遇到对dom元素的操作都是直接获取dom元素,比如说: 但是如果修改的样式比较多的话,不如直接"切换"dom元素,如下例子: 这样会节省一些性能.因为操作dom的 ...
- js介绍，js三种引入方式，js选择器，js四种调试方式，js操作页面文档DOM（修改文本，修改css样式,修改属性）
js介绍 js运行编写在浏览器上的脚本语言(外挂,具有逻辑性) 脚本语言:运行在浏览器上的独立的代码块(具有逻辑性) 操作BOM 浏览器对象盒子 操作DOM 文本对象 js三种引入方式 (1)行间式: ...
- DOM 修改与DOM元素
㈠HTML DOM - 修改 修改 HTML = 改变元素.属性.样式和事件. ①创建 HTML 内容 改变元素内容的最简单的方法是使用 innerHTML 属性. 下面的例子改变一个 <p ...
随机推荐
- 关于Npoi+excel文件读取，修改文件内容的处理方式
因最近有需求场景,实现对文件的读写操作,又不单独生成新的文件,对于源文件的修改,做了一个简单实现,如下↓ // 要操作的excel文件路径 string fileName = Server.MapPa ...
- CWMP开源代码研究——git代码工程
原创作品,转载请注明出处,严禁非法转载.如有错误,请留言! email:40879506@qq.com 声明:本系列涉及的开源程序代码学习和研究,严禁用于商业目的. 如有任何问题,欢迎和我交流.(企鹅 ...
- airflow 安装配置celery+rabbitmq celery+redis
AirFlow的安装可以参考:https://www.cnblogs.com/braveym/p/11378851.html 这里介绍的是AirFlow 安装配置celery+rabbitmq 和 ...
- 走近kafka-文件存储
过期的数据才会被自动清除以释放磁盘空间.比如我们设置消息过期时间为2天,那么这2天内的所有消息都会被保存到集群中,数据只有超过了两天才会被清除. Kafka只维护在Partition中的offset值 ...
- Laravel-admin 消息提醒、播放音频、点击跳转
jquery-toastr 消息提醒.播放音频.点击跳转 应用情景,有新的订单生成,后台进行消息提醒并播放音频(这里用到轮询简单实现):下面附代码 1.找到laravel-admin 中的 index ...
- 老贾的幸福生活day6 整型和布尔值的转换 字符串讲解 for 循环简介
整型和布尔值的转换: 整型: python 2 整型 int long(长整型) /获取的是整型 python 3 整型 int 获取的是浮点数(小数) 十进制转二进制: print(bin(36)) ...
- Linux7_MySQL5.7_主从复制_scripts
# cat my_full_backup.sh #!/bin/bash BEGINTIME=`date +"%Y-%m-%d %H:%M:%S"` format_time=`dat ...
- Redis基本数据
Redis Redis是一个速度非常快的非关系数据库(NoSql),它可以存储键(key)与五种不同的值(value)之间的映射.可以将存储的内存的键值对数据持久化到硬盘. Redis 数据结构 Re ...
- STL之Deque的使用方法
STL 中类 stack 实现了一个栈 1)push 能够插入元素 2)pop 移除栈顶元素 使用的时候,需要包含头文件 #include <stack>,stack 被声明如下: nam ...
- rsync 文件同步 linux
3.rsync+sersync更快更节约资源实现web数据同步4.unison+inotify实现web数据双向同步