javaScript动态添加样式

[动态添加css样式]

<html>

  <head>

    <script type="text/javascript">

      window.onload=function(){

        var head=document.getElementsByTagName(‘head‘)[0];     //获取到head元素 

        var link=document.createElement(‘link‘);             //创建link元素节点,也就是link标签

          link.rel="stylesheet";                    //为link标签添加rel属性

          link.href="basic.css";                    //为link标签添加href属性 , 属性值是css外链样式表的路径

        head.appendChild(link);                    //将link元素节点添加到head元素子节点下

        

 }

    </script>

  </head>

  <body>

    <div id="div1">测试</div>

  </body>

</html>

[动态添加script标签]

原理同上

<html>

  <head>

    <script type="text/javascript">

       window.onload=function(){

        var head=document.getElementsByTagName(‘head‘)[0];     //获取到head元素 

        var script=document.createElement(‘script‘);           //创建script标签

          script.type="text/javascript";                //为script标签添加type属性         

          script.src="basic.js";                    //为script标签添加scr属性,属性值为js路径

        head.appendChild(‘script‘);                  //将script标签添加到head的子节点下

}

    </script>

  </head>

  <body>

    <div id="div1">测试</div>

  </body>

</html>

时间: 2024-10-10 14:09:48

javaScript动态添加样式的相关文章

【转】console.time 简单分析javascript动态添加Dom节点的性能

本文代码约定 1 el: 指的是增加直接点的DOM节点 2 totalNum: 为100000(值越大越能体现差距)指的是循环创建的DOM节点 3 for(var i=0;i<totalNum;i++){}: 我们用for来表示就好了,简写代码 如果叫你用javascript动态增加DOM节点,你有哪几种思路呢? 1 .使用innerHTML和字符串拼接 console.time("time1"); var str = ""; for{ str += &quo

console.time 简单分析javascript动态添加Dom节点的性能

Bullshit 本来想每天都更新下博客的,但是最近要考试,还有就是自己还是停留在暗自窃喜中吧(这种想法要改变).其实最近总在想,自己要怎么去管理自己的数据,每天的生活都是对自己的数据的增删查改.昨天把自己的电脑重装了,确实很多软件的存放要改地方了,之前不知道怎么去管理软件安装,所以放得乱七八糟的.说好一大堆废话之后,我最后再说一遍,管好自己的时间.数据真的比你学习东西重要. Method 本文代码约定 1 el: 指的是增加直接点的DOM节点 2 totalNum: 为100000(值越大越能

用Javascript动态添加删除HTML元素实例 (转载)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>用javascript动态添加删除html元素</title> <script type="text/jav

使用JavaScript动态添加CSS样式规则

原文链接: Add Rules to Stylesheets with JavaScript原文日期: 2014-09-04翻译日期: 2014-09-05翻译人员: 铁锚 现在Web应用中有大量的JavaScript代码,而我们也一直在追寻各种使他们更快的解决方案. 我们通过 事件代理(event delegation) 让事件监听更高效, 我们利用 函数降频技术(function debouncing) 来限制一段时间内给定方法被调用的次数,请参考: 如何防止事件函数的高频触发(中文翻译)

javascript动态添加form表单元素

2014年11月7日 17:10:40 之前写过几篇类似的文章,现在看来比较初级,弄一个高级的简单的 情景: 后台要上传游戏截图,截图数量不确定,因此使用动态添加input节点的方法去实现这个效果 主要用到的函数有: document.getElementById(); objNode.parentNode; objNode.cloneNode(); objNode.removeAtrribute(); objNode.innerHTML(); objNode.appendChild(); ht

IE8、7、6动态添加样式时,CSS hack的BUG

问题描述 下面这段CSS代码通过JS动态添加,结果会怎样呢? .box { background: red; /* normal browsers */ *background: blue; /* IE 6 and 7 */ _background: green; /* IE6 */ } 通过以下代码添加到页面中 var node = document.createElement('style'); node.type = 'text/css'; if (node.styleSheet) { /

转: javascript动态添加、修改、删除对象的属性和方法

在其他语言中,对象一旦生成,就不可更改了,要为一个对象添加修改成员必须要在对应的类中修改,并重新实例化,而且程序必须经过重新编译.JavaScript 中却非如此,它提供了灵活的机制来修改对象的行为,可以动态添加.修改.删除属性和方法.例如首先使用类Object来创建一个空对象user:var user=new Object();1.添加属性这时user 对象没有任何属性和方法,显然没有任何用途.但可以为它动态的添加属性和方法,例如:user.name=”jack”;user.age=21;us

javascript动态添加html节点

之前一直没怎么接触需要动态添加和删除html节点的项目,这次项目中用到了,也学习了. 在一个<table id="tab">标签中添加一个<tr id="tr">标签,<tr>标签里面包含4个<td>标签 function insertTr() { tr = document.createElement("tr"); html = "<td></td>"+

javascript动态添加css样式

查看demo:http://koringz.github.io/addcssstyle/ css的cssstylesheet方法有哪些属性和方法,首先我们是console.log(style.sheet). 当我们知道了style具有这些方法的时候,我们可以用一个函数输出一次获得的css属性方法. function addCss () { var sty = document.createElement('style'); var h2 = document.getElementsByTagNa