从js传属性到css文件中（js引入css文件）

发布时间：2023-12-08

从js传属性到css文件中（js引入css文件）

更新：<time datetime="2022-11-13 20:34">2022-11-13 20:34</time>

本文目录一览：

1、JS如何赋值给CSS？
2、在JS文件中调用外部CSS文件
3、救命，如何用js给div标签添加css属性，当鼠标事件发生的时候，譬如点击某个元素
4、求教：JS代码怎么在css标签属性里使用
5、用js文件怎么引入其他js文件和css文件
6、[jS 赋值给CSS 怎么操作](#jS 赋值给CSS 怎么操作)

JS如何赋值给CSS？

要写在onload事件方法中。因为你这样写，会在DOM节点（aaa）还没加载的时候执行，找不到aaa所以就不能改变其宽度

function load(){
    document.getElementById('aaa').style.width =100;
}

</head>
<body onload="load()">
<div class="aaa" id="aaa"></div>
</body>

在JS文件中调用外部CSS文件

JS文件中动态调用外部css, 文件方法如下:

function loadExtentFile(filePath, fileType){
    if(fileType == "js"){
        var oJs = document.createElement('script');
        oJs.setAttribute("type","text/javascript");
        oJs.setAttribute("src", filename);//文件的地址 ,可为绝对及相对路径
        document.getElementsByTagName("head")[0].appendChild(oJs);//绑定
    }else if(fileType == "css"){
        var oCss = document.createElement("link");
        oCss.setAttribute("rel", "stylesheet");
        oCss.setAttribute("type", "text/css");
        oCss.setAttribute("href", filename);
        document.getElementsByTagName("head")[0].appendChild(oCss);//绑定
    }
}

loadExtentFile("js/func.js", "js");
loadExtentFile("default.css", "css");

清空:

var lists = document.getElementsByTagName("link");
for ( var i = 0; i < lists.length; i++) {
    if (lists[i].getAttribute("href").indexOf(".css") != -1) == -1) {
        lists[i].parentNode.removeChild(lists[i]);
    }
}

上面的判断语句中可以加入自己的判断。

救命，如何用js给div标签添加css属性，当鼠标事件发生的时候，譬如点击某个元素

需要准备的材料分别有：电脑、html编辑器、浏览器。 1、首先，打开html编辑器，新建html文件，例如：index.html，编写问题基础代码。 2、在index.html中的script标签，输入js代码：$('div').click(function () {$(this).css('color', 'blue');});。 3、浏览器运行index.html页面，此时点击123所在的div，div会变为蓝色文本。

求教：JS代码怎么在css标签属性里使用

你直接将你的clear函数写到一个Js文件，且加入onload=clear;然后引入就可以了。 试试

用js文件怎么引入其他js文件和css文件

方法一，在调用文件的顶部加入下例代码：

document.write("<script language=javascript src='/js/import.js'></script>");

(注：有时你引用的文件还可能需要引用其他的js,我们需要将需要的那个js文件也以同样的方法引用进来)

方法二,通过中间界面对js进行应用

就是我们可以在某个html中引用了你需要的js文件，我们可以通过拿到那个html文件的对象，然后在通过这个对象去引用js的方法。 （一般不常用）

方法三：在将下边代码放入Body中：

new_element=document.createElement("script");
new_element.setAttribute("type","text/javascript");
new_element.setAttribute("src","import.js");
document.body.appendChild(new_element);

我们来分析一下关键的几句代码： 首先，我们利用document.createElement("script")生成了一个script的标签，设置其 type属性为text/javascript，src为import.js(这里的1.js同2.js放在同一个目录，也可放在不同的目录)。最后将这个标签动态 地加入body中。如此一来，我们就可以调用到不同js文件中的方法了。 注意：<script language="JAVASCRIPT" src='1.js'></script>一定要放在body下面。 因为在2.js中用到了body（document.body.appendChild(new_element);） 如果将引如2.js的代码放在body上面，也就是说， 进入页面后，还没有生成body就已经执行b.js里的document.body.appendChild(new_element);了。 这时body不存在就会抛JavaScript错误。

jS 赋值给CSS 怎么操作

<div id="did" class="defcls"></div>

js 使用 ...style.[css属性（第二个首字母大写）]

var dom = document.getElementById("did");
dom.style.color = "#000";
dom.style.fontSize = "30px";

因为js选择元素很麻烦，所以建议引入jquery 库，操作元素很方便。也是常用的做法。

jquery

$('.defcls').css({color:'#000',fontSize:'20px'});

以上是直接修改元素的属性。直接修改 CSS样式表 就很麻烦了，一般不这样做。

js直接修改页面中的CSS样式表

var Hsheet = window.frames.wpages.document.styleSheets[0];//找到样式表
function setRules(name){
    for(var i = 0; i < Hsheet.cssRules[0].cssRules.length; i++){
        if(Hsheet.cssRules[0].cssRules[i].selectorText===name){ //找到样式
            Hsheet.cssRules[0].cssRules[i].style.color = "#000";
            break;
        }
    }
}
setRules('defcls');

这个方式比较罕见，只有在即为特殊的情况下，才会直接修改样式表，也是效率最低的一种。

推荐文章