提纲：我们可以通过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

必需。要添加到样式表的规则的完整的、可解析的文本表示。

  • 对于规则集（rule sets），rule 指示选择器和样式声明。
  • 对于 @ 规则（At rules），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修改元素样式的更多相关文章

  1. js中cssText批量修改元素样式

    平常编写代码,更改一个元素样式的时候,自己都是用 obj.style.width = "200px"; obj.style.position = "absolute&qu ...

  2. DOM访问元素样式和操作元素样式

    在HTML中定义样式的方式有三种:通过<link/>元素包含外部样式表文件(外部样式表).使用<style/>元素定义嵌入式样式(嵌入式样式表).使用style特性定义针对特定 ...

  3. DOM修改元素的方法总结

    今天我们要谈谈DOM元素的修改(包括修改内容,属性,样式).修改内容的方法----3种:elem.innerHTML:获取或设置元素开始标签到结束标签之间的原始HTML代码片段:elem.textCo ...

  4. DOM获取元素、修改元素

    ## DOM获取元素.修改元素### 1.DOM#### ①什么是DOM?作用? > DOM是文档对象模型 > 作用:操作网页内容,可以开发网页内容特效和实现用户交互.#### ②DOM对 ...

  5. JavaScript 读取修改元素 及 伸拉门案例

    JavaScript 读取修改元素 及 伸拉门案例 版权声明:未经授权,严禁转载! 读取 / 修改元素 - 读取修改元素内容 - 读取修改元素属性 - 读取修改元素样式 元素的内容 读取或修改元素节点 ...

  6. js 修改页面样式的两种方式

    1.  element.style       行内样式操作 代码示例 : <!DOCTYPE html> <html lang="en"> <hea ...

  7. react项目中对dom元素样式修改的另一种方法以及将组件插入到node节点中

    在项目中,以前如果遇到对dom元素的操作都是直接获取dom元素,比如说: 但是如果修改的样式比较多的话,不如直接"切换"dom元素,如下例子: 这样会节省一些性能.因为操作dom的 ...

  8. js介绍，js三种引入方式，js选择器，js四种调试方式，js操作页面文档DOM（修改文本，修改css样式,修改属性）

    js介绍 js运行编写在浏览器上的脚本语言(外挂,具有逻辑性) 脚本语言:运行在浏览器上的独立的代码块(具有逻辑性) 操作BOM 浏览器对象盒子 操作DOM 文本对象 js三种引入方式 (1)行间式: ...

  9. DOM 修改与DOM元素

    ㈠HTML DOM - 修改 修改 HTML = 改变元素.属性.样式和事件.   ①创建 HTML 内容 改变元素内容的最简单的方法是使用 innerHTML 属性. 下面的例子改变一个 <p ...

随机推荐

  1. Prettier格式化配置

    HTML/CSS/JS/LESS 文件的 prettier 格式化规则 { // 使能每一种语言默认格式化规则 "[html]": { "editor.defaultFo ...

  2. nRF5 SDK Bootloader and DFU moudles(2)

    镜像的验证 在执行设备固件更新之前,应验证新映像. 在传输实际固件(预验证)之前,可以检查某些信息(例如,兼容性). 其他信息,例如图像的散列,应在传输(验证后)后进行验证. Init packet ...

  3. 使用PowerShell 修改DNS并加入域中

    运行环境:Windows Server 2012 R2 此powershell脚本为自动修改本机DNS并加入到域中 但有的时候会提示[本地计算机当前不是域的一部分.请重新执行脚本!]错误,如遇到该错误 ...

  4. vim中ctrl+z,jobs,fg命令用法

    例如:vi test.cctrl + z 将vi 打开的test.c停止并转到后台又打开一个vi buf.cctrl + z 将vi 打开的buf.c停止并转到后台此时通过jobs可以看到任务列表通过 ...

  5. Java判断指定日期是否为工作日

    Java判断指定日期是否为工作日 转自:https://www.jianshu.com/p/966659492f2f 转:https://www.jianshu.com/p/05ccb5783f65转 ...

  6. Synchronize和ReentrantLock区别

    转自:https://blog.csdn.net/m0_37700275/article/details/83151850 目录介绍1.Synchronize和ReentrantLock区别 1.1 ...

  7. PHPexcel使用 技巧

    phpexcel不用多说了  导出表格时经常会用到  本帖主要记录一下几个经常用到的操作 # 设置自动换行 $PHPExcel->getActiveSheet()->getStyle(&q ...

  8. appium-Android_webview页面元素定位遇到的问题

    如上图所示,该页面包含webview,但是用driver.contexts只获取到了Android原生,而webview的context则没有获取到,所以webview页面的元素.希望有大佬能提供有效 ...

  9. MySQL之主键

    一.主键  primary key (唯一标识 .不能重复.不能为空) 1.主键-----是表中的字段,这个字段能唯一标识一条记录.例如 学生表(学号.姓名,年级)里的学号,不能重复.不能为空: 课程 ...

  10. C/S软件方案

    互联网时代客户端软件的一些方案 纯Native开发, C++/C#/duilib+C++(Windows), Objective-c(Mac) Qt(Windows/Mac) NW.js/Electr ...