原生js动态添加style，添加样式

最新推荐文章于 2025-11-24 11:09:37 发布

转载最新推荐文章于 2025-11-24 11:09:37 发布 · 8.1k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：http://www.cnblogs.com/pengfei25/p/10615671.html

收录于

当前文章被以下社区和专栏收录：

本文介绍了两种使用原生JavaScript动态添加CSS样式的有效方法。第一种直接创建style元素并追加到head中；第二种通过创建div元素转换为DOM再进行添加。

原生js动态添加style，添加样式

第一种

var style="[assign-url='"+str+"']{display:initial}";
var ele=document.createElement("style");
ele.innerHTML=style;
document.getElementsByTagName('head')[0].appendChild(ele)

第二种，使用中间元素div转化为dom（推荐）：

var style='<style>button[assign-url="'+str+'"]{display:initial;}</style>';
var ele=document.createElement('div');
ele.innerHTML=style;
document.getElementsByTagName('head')[0].appendChild(ele.firstElementChild)

转载于:https://www.cnblogs.com/pengfei25/p/10615671.html

标签