原生js更改css样式的两种方式

下面我给大家介绍的是原生js更改CSS样式的两种方式：

1. 通过在javascript代码中的node.style.cssText="css表达式1；css表达式2；css表达式3  "的方式直接更改CSS样式。

2. 先在CSS样式表中对特定的类如“active类”设置样式（这里的active类是假定的，暂时不存在），然后再在javascript代码中通过node.classname="active"使得CSS样式表中对active类的样式设置附加到该node节点上来。

下面是详细介绍，首先是html的代码：

<style type="text/css">
   div {
 float: left;
 padding: 20px;
 margin: 10px;
 border: 1px solid #000;
 background-color: #fff;
 color: #000;
 }
   .active
    {
      background-color:blue
    }
</style>
<body>
  <div class="root">
  </div>
</body>

只是一个简单的div,运行结果为

首先使用上面所说的第一种方式更改css样式，写入如下的javascript代码:

<script type="text/javascript">
var root=document.getElementsByClassName("root")[0];
 root.style.cssText="background-color: blue;color: #fff;";
</script>

运行结果为：

然后使用上面所说的第二种方式更改css样式，写入如下的javascript代码:

<script type="text/javascript">
  var root=document.getElementsByClassName("root")[0];
   root.className="active";
</script>

同样运行结果为：

总结：这两种方式结果相同，但就操作过程而言，第二种方式也就是“node.classname”的方式使得css和js的写入分隔开来，显然更加合理有序一些。如果css语句比较简单的话，这两种方式没有差别，但若css语句比较复杂的话，显然第二种方式比较有条不紊。

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

赞 (0)

相关推荐

  • 利用JavaScript更改input中radio和checkbox样式

    利用JavaScript更改input中radio和checkbox样式

    本文涉及到的图片 body { margin: 0px; padding: 0px; font-size: 13px; } .input_style { padding: 6px 0px; width: 600px; margin: 0px auto; border-bottom: #666666 1px dotted; } .input_style span { display: inline-block; width: 15px; height: 15px; text-align: left

  • js的alert样式如何更改如背景颜色

    js的alert样式如何更改如背景颜色

    复制代码 代码如下: window.alert = function(str) { var shield = document.createElement("DIV"); shield.id = "shield"; shield.style.position = "absolute"; shield.style.left = "0px"; shield.style.top = "0px"; shield.s

  • js通过更改按钮的显示样式实现按钮的滑动效果

    通过更改按钮的显示样式,来实现按钮动态滑动 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> &

  • 原生js更改css样式的两种方式

    原生js更改css样式的两种方式

    下面我给大家介绍的是原生js更改CSS样式的两种方式: 1. 通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3  "的方式直接更改CSS样式. 2. 先在CSS样式表中对特定的类如"active类"设置样式(这里的active类是假定的,暂时不存在),然后再在javascript代码中通过node.classname="active"使得CSS样式表中对active类的样式设

  • js改变css样式的三种方法推荐

    共用代码: <div id="div"> this is a div </div> var div=document.getElementById('div'); 第一种:用cssText div.style.cssText='width:250px;height:250px;border:1px red solid;'; 第二种:用setProperty() div.style.setProperty('width','250px'); div.style.s

  • iOS 实现类似QQ分组样式的两种方式

    iOS 实现类似QQ分组样式的两种方式

    思路 思路很简单,对模型数据操作或则控制界面显示 先看下json部分数据 "chapterDtoList": [{ "token": null, "id": 1295, "chapterName": "第一章", "parentId": 0, "chapterLevel": 0, "attachmentUrl": "", &qu

  • JS使用post提交的两种方式

    本文实例讲述了JS使用post提交的两种方式.分享给大家供大家参考,具体如下: 第一种提交post的方式是传统方式,判断浏览器进行post请求. <SCRIPT stype=text/javascript> var xmlobj; //定义XMLHttpRequest对象 function CreateXMLHttpRequest() { if(window.ActiveXObject) //如果当前浏览器支持Active Xobject,则创建ActiveXObject对象 { //xmlo

  • 浅析js实现网页截图的两种方式

    Web端的截图(生成图片)并不算是个高频的需求,资料自然也不算多,查来查去,也不过Canvas 和 SVG两种实现方案,原理大概相似,都非真正义上的截图而是把DOM转为图片,然而实现方式却截然不同. Canvas 实现 如何将dom转换成canvas图片?自然是要一点点画到canvas里,想想都是件麻烦事.通过分析github的知名截图库 niklasvh/html2canvas (7k+ star)的源码,梳理了其大致的思路: 递归取出目标模版的所有DOM节点,填充到一个rederList,并

  • 引入CSS样式的五种方式

    一.使用STYLE属性 将STYLE属性直接加在个别的元件标签里,<元件(标签) STYLE="性质(属性)1: 设定值1; 性质(属性)2: 设定值2; ...} 例如: <TD STYLE="COLOR:BLUE; font-size:9pt; font-family:"标楷体"; line-height:150%>这种用法的优点 是可灵巧应用样式於各标签中,但是缺点则是没有整篇文件的『统一性』. 二.使用STYLE标签 将样式规则写在<

  • 详解js跨域请求的两种方式，支持post请求

    JSONP实现跨域 常用的jquery实现跨域调用 $.ajax({ url: "http://127.0.0.1/~chenjiebin/mycode/php/crossdomain/index.php", dataType: "jsonp", jsonp: "callback", context: document.body, success: function(data) { console.log(data); } }); 这个调用实际上

  • js获取url参数值的两种方式

    方法一:正则分析法 复制代码 代码如下: function getQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); var r = window.location.search.substr(1).match(reg); if (r != null) return unescape(r[2]); return n

  • 关于React动态修改元素样式的三种方式

    关于React动态修改元素样式的三种方式

    目录 React动态修改元素样式 1.借助ref动态修改样式 2.通过动态控制状态的变化修改元素的样式(两种方式) 3.通过在DOM中使用JS代码(三元运算符) React样式冲突问题 css-样式私有化 cssModules-维持类名 css modules-最佳实践 React动态修改元素样式 React动态修改元素样式常用的方式有两种:借助ref和通过动态控制状态的变化修改元素的样式 1.借助ref动态修改样式 在需要修改样式的元素上添加ref <div className='scroll

  • 原生js获取元素样式的简单方法

    我们在开发过程中经常会遇到通过js获取或者改变DOM元素的样式,方法有很多,比如:通过更改DOM元素的class.现在我们讨论原生js来获取DOM元素的CSS样式,注意是获取不是设置 在开始之前先说下获取最终应用在元素上的所有CSS属性对象的意思是,如果没有给元素设置任何样式,也会把浏览器默认的样式返回来. 1.ele.style 在学习DOM的时候就看到通过ele.style来获取元素样式值,但是有时候获取的并非是节点的样式值,而是空值.这是因为ele.style只能获取写在元素标签中的sty

随机推荐