js动态创建style节点(js文件中添加css)

最新推荐文章于 2022-03-02 12:52:14 发布
最新推荐文章于 2022-03-02 12:52:14 发布
阅读量248 收藏
点赞数
文章标签： c# javascript ViewUI
原文链接：http://www.cnblogs.com/webqiand/p/4325684.html
版权

 

ie6 不能 document.createElement('style') 然后append到head标签里。所以就找到这样个好文章

---------------------

有很多提供动态创建 style 节点的方法，但是大多数都仅限于外部的 css 文件。如何能使用程序生成的字符串动态创建 style 节点，我搞了2个小时。

静态外部 css 文件语法：

@import url(style.css);

动态外部 css 文件加载的方法有如下：

第一种：

var style = document.createElement(’link’);
style.href = ’style.css’;
style.rel = ’stylesheet’;
style.type = ‘text/css’;
document.getElementsByTagName(’HEAD’).item(0).appendChild(style);

第二种简单：

document.createStyleSheet(style.css);

动态的 style 节点，使用程序生成的字符串：

var style = document.createElement(’style’);
style.type = ‘text/css’;
style.innerHTML=”body{ background-color:blue; }”;
document.getElementsByTagName(’HEAD’).item(0).appendChild(style);

很遗憾，上面的代码在 ff 里面成功，但是 ie 不支持。从老外论坛得到代码：

var sheet = document.createStyleSheet();
sheet.addRule(’body’,'background-color:red’);

成功，但是很麻烦，要把字符串拆开写，长一点的写死,累的像狗一样。

接着搜，在一个不知道什么国家的什么语言的blog上找到代码：

document.createStyleSheet(”javascript:’body{background-color:blue;’”);

成功，此人实在厉害，但是问题出来了，url 最大 255 个字符，长一点的就不行了，改：

window.style=”body{background-color:blue;”;
document.createStyleSheet(”javascript:style”);

完美解决！！代码:

<html> 
<head> 
<script> 
function blue(){ 
if(document.all){ 
window.style="body{"; 
document.createStyleSheet("javascript:style"); 
}else{ 
var style = document.createElement('style'); 
style.type = 'text/css'; 
style.innerHTML="body{ background-color:blue }"; 
document.getElementsByTagName('HEAD').item(0).appendChild(style); 
} 
} 
</script> 
</head> 
<body> 
<input type="button" value="blue" οnclick="blue();"/> 
</body>

 

原文  http://www.cnblogs.com/stephenykk/archive/2013/06/10/3131231.html

转载于:https://www.cnblogs.com/webqiand/p/4325684.html

weixin_30609331
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Javascript动态创建 style 节点
12-11
有很多提供动态创建 style 节点的方法，但是大多数都仅限于外部的 css 文件。如何能使用程序生成的字符串动态创建 style 节点，我搞了2个小时。 静态外部 css 文件语法： @import url(style.css); 动态外部 css 文件...
JavaScript动态创建link标签到head里的方法
01-19
本文实例讲述了JavaScript动态创建link标签到head里的方法。分享给大家供大家参考。具体分析如下： 相信有很多做前端的朋友碰到过需要用 JavaScript 动态创建样式表标签——link标签。这里我们就来说说如何在浏览器...
javascript创建css样式的方法
happyqyt的专栏
05-05 3576
有很多方法可以调用css样式，如使用内嵌样式，在html直接加入样式，给定外部样式文件，在外部样式文件中使用@import url(样式文件路径)，这些都是大家常用的，其实还有就是使用javascript进行样式的定义. 第一种： var style = document.createElement(’link’); style.href = ’style.css’; style.rel = ’stylesheet’; style.type = ‘text/css’; do
javascript动态创建stylesheet
是非一念间
06-03 914
[size=x-large]应用场景：[/size] ext的grid中row背景和字体颜色，需要通过读取数据库中配置的颜色来渲染grid。 [size=x-large]模块结构：[/size] 已经有一个页面进行配置信息的CRUD了，数据库中存储的值形如：#99CCFF 这部分代码就不贴了。 [size=x-large]曲折的第一步：[/size] 对了本文介绍的模...
外部JS文件调用外部的Css文件
风致岚珊的博客
06-23 999
一种是只用.js文件调用css文件，在html或JSP页面中就直接调用js即可 在.js文件的function中写如下代码 var css = document.createElement("link"); css.rel = "stylesheet"; css.type = "text/css"; css.href = "../../Css/Button.css"; documen
CSS样式创建（外部样式 内部样式 内联样式）
weixin_63877292的博客
03-02 990
CSS三种样式创建的语法
JS设置css样式的几种方式
weixin_30703911的博客
12-20 194
/* 1.直接设置style属性 */ element.style.height = '100px'; /* 2.直接设置属性 */ element.setAttribute('height', '100px'); /* 3.使用setAttribute设置style属性 */ element.setAttribute('style', 'height: 100px...
javascript 动态生成css代码的两种方法
01-19
有时候我们需要利用js来动态生成页面上style标签中的css代码，方法很直接，就是直接创建一个style元素，然后设置style元素里面的css代码，最后把它插入到head元素中。但有些兼容性问题我们需要解决。首先在符合w3c...
使用javascript插入样式
01-19
有时候我们需要利用js来动态生成页面上style标签中的css代码，方法很直接，就是直接创建一个style元素，然后设置style元素里面的css代码，最后把它插入到head元素中。 但有些兼容性问题我们需要解决。首先在符合w3c...
使用 JS 来写css
Ashy- 在这里成长
06-10 1087
JS是真的强 js可以写前端，可以写后端，可以写服务端，还可以写数据库 没想到吧，js还可以写css // package.json { "styled-components": "^5.2.3", } // ---- import { HomePage } from './style'; // --- return ( <HomePage> <div> 内容 </div> {/* 略 */} </Ho
js中创建class样式css样式
singlever的博客
06-29 5023
参考文章https://www.cnblogs.com/stephenykk/p/5406614.html 最近特别无聊，写了些脚本优化下浏览器浏览体验 单节点，或者一个节点，我们修改样式是这样的 let kuai = document.querySelector('.xxx') kuai.style.backgroundColor = 'black' 1.获取节点 2.通过节点style修改指定样式 但是如果需要设定的样式有几十个，相同的样式，并且这种样式在页面中的css是...
js动态创建样式: style和link-实现动态class
呼吸的小鱼博客
11-26 1789
js动态创建样式: style 和 link-实现动态创建class-加载-显示-动态存储表单样式class实现存储显示 function blue(color){  if(document.all){ // document.createStyleSheet(url) window.style=".fontColor{ color: "+color+" }";  document.create...
html 动态添加style,Javascript动态创建 style 节点
weixin_29251337的博客
06-09 1701
Javascript动态创建 style 节点互联网 发布时间：2008-10-17 19:25:03 作者：佚名 我要评论有很多提供动态创建 style 节点的方法，但是大多数都仅限于外部的 css 文件。如何能使用程序生成的字符串动态创建 style 节点，我搞了2个小时。静态外部 css 文件语法：@import url(style.css);动态外部 css 文件加载的方法有...
js中获取（设置）style所有属性都为空的时候，写成行内样式就能获取到了
qq_41619567的博客
02-22 1444
js中获取（设置）style所有属性都为空的时候，写成行内样式就能获取到了
js动态添加css
pnuts的专栏
02-11 7106
为了节省代码和写出更兼容的代码，有时我们需要用Javascript动态的增加CSS样式。IE下，我们可以使用 document.createStyleSheet() 方法；而在非IE浏览器上，就不支持这个方法。可以使用document.styleSheets[0]，但要求网页里必须最少已经加载过一个样式表。后来我找到以下方法，可以在Firefox、Opera下正常运行：var str_cs
利用js往标签内加内容
haining711的专栏
04-07 1487
欢迎  个人中心         设为首页                   var user=$.cookie('cookie值');       if(user==null || user=="") {    $("#person").html("登录|注册"); }else{              document.getElementById("span_id")
C# 直接引用js文件，调js里的数据
weixin_30466953的博客
04-01 541
　　　　C# 直接引用js文件，调js里的数据 　引入命名空间　using System.IO;　 string path = AppDomain.CurrentDomain.BaseDirectory + "/content/js/branddata.js"; string str2 = File.ReadAllText(path); path:js所在的路...
动态生成节点设置样式
最新发布
05-24
动态生成节点的样式可以通过设置元素的style属性来实现。比如，可以使用JavaScript代码来创建一个新的div元素，并设置其背景色为红色： ```javascript var newNode = document.createElement("div"); newNode.style.backgroundColor = "red"; ``` 如果需要在CSS中定义一些样式，并将这些样式应用到动态生成的节点上，可以使用classList属性。比如，可以先在CSS中定义一个名为“my-style”的样式类，然后在JavaScript代码中将该样式类添加到新创建的节点上： CSS样式： ```css .my-style { background-color: blue; color: white; } ``` JavaScript代码： ```javascript var newNode = document.createElement("div"); newNode.classList.add("my-style"); ``` 这样，新创建的节点就会应用名为“my-style”的样式类，并拥有蓝色背景和白色文字颜色。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值