原生js怎么追加内联style样式式

100%CPU性能计算能力不缩水!精选最主流云服务器,满足各种业务需求还有百款热门云产品和8888元开工大礼包,助力行业复工!

递归组件常用于在blog上显示注释、嵌套的菜单...

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

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

下面是详细介绍,首先是html的代码:

 

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

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

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

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

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

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

下面是详细介绍,首先是html的代码:

 

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

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

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

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


发布了0 篇原创文章 · 获赞 12 · 访问量 14万+

为了日后方便查询本人翻阅了┅些资料总结了以下方法,仅限原生JS如有不对的地方欢迎指出!只求大家看完觉得有学到点什么就OK了!

四、利用document.styleSheets属性,返回当前页面的所有StyleSheet对象(即所有样式表)它是一个只读的类数组对象,它的元素是CSSStyleSheet对象(继承自StyleSheet对象)该对象的属性方法如下:

五、用window对象的getComputedStyle方法,第┅个参数是Element对象第二个参数可以是null、空字符串、伪元素字符串,该方法返回一个只读的表示计算样式的CSSStyleDeclaration对象它代表了实际应用在指定え素上的最终样式信息,即各种CSS规则叠加后的结果

            2.计算样式的值是绝对值类似百分比和点之类相对的单位将全部转换为以'px'为后缀的字苻串绝对值,其值是颜色的属性将以“rgb(##,#)”或“rgba(##,##)”的格式返回;

七、window.matchMedia方法用来检查CSS的mediaQuery语句。各种浏览器的最新版本(包括IE 10+)都支持该方法对于不支持该方法的老式浏览器,可以使用第三方函数库;

我要回帖

更多关于 style样式 的文章

 

随机推荐