哈喽大家好！别担心，我现在就教你们如何用JavaScript来改CSS样式。想学啥尽管说！
DOM操作引入CSS文件
谈到DOM这个词，你可能会有点摸不着头脑，但它可是个管理网站上CSS加载的大神器。简单来说，它就像个网页打扮专员，规划并整理着文档排版。是不是很神奇又实用？
聊聊怎么轻松操作DOM，这样就可以随心所欲地调整HTML了。接下来要说的就是如何添加CSS了？真的超级简单！
<link rel="stylesheet" href="style.css">
接下来，让我们来处理loadCSS这个家伙。别怕，挺容易的！只需把标记放在那儿，href里面填入想要引入的CSS文件地址，最后粘贴到页面中就搞定了！
别忘了添加这个函数调用，这会让你加载CSS文件更流畅！
给你支个招儿，只要在HTML元素上关联个CSS文件就行了呗！其实就把类里面的参数稍微变下。
想要让HTML里的东西变漂亮？给它加个好看的class属性就搞定。然后到CSS文件里面去编辑一下，看起来就顺眼多了！
简单的说，就是用Javascript改个那个HTML元素的class属性，咱们的网站分分钟就变美了！这不就是“牵一发动全身”。
<pre class='brush:javascript;toolbar:false;’>function loadCSS(url) {
var link = document.createElement(“link”);
link.type = “text/css”;
link.rel = “stylesheet”;
link.href = url;
document.getElementsByTagName(“head”)[0].appendChild(link);
}
loadCSS(“style.css”);
让我教你怎么快速搞定CSS文件加载。首先，通过loadCSS函数加载CSS文件；然后找到想调整样式的元素，随便加个class属性就成了。
别着急！这儿有个小技巧，用CSS的一些魔法道具，无需大费周折，你想要的视觉效果就轻松搞定了！
改变HTML元素的class属性
咱们说说，咋在HTML里”class”这个词儿替换成我们想要的CSS样式？
首先，得用loadCSS（加载CSS文件的方法）把样式加进来啦；
function loadCSS(url) {
var link = document.createElement("link");
link.type = "text/css";
link.rel = "stylesheet";
link.href = url;
document.getElementsByTagName("head")[0].appendChild(link);
}
loadCSS("style.css");
// 获取需要添加样式的元素
var element = document.getElementById("example");
// 改变元素的class属性
element.className = "example-class";
2.然后，就可以通过getElementById找出希望美化的那颗星星了
赶快换个类目吧～别忘了在css里加个适合的选色器，这样就能让你的作品更吸引人了！
小伙伴们，想要网站漂亮点？不止是addClass属性，还有其他方法搞CSS的！
你是不是觉得CSS样式有些看不懂呀？别急，让我来给你讲清楚点～
记住首先得连上要用到的 CSS 文件。接下来就能用 JavaScript 的getElementById找你要操作的那部分了哟~
你猜怎么着，现在我们能用element.style给每个元素套上炫酷的css样式了！简直太神奇
function loadCSS(url) {
var link = document.createElement("link");
link.type = "text/css";
link.rel = "stylesheet";
link.href = url;
document.getElementsByTagName("head")[0].appendChild(link);
}
loadCSS("style.css");
// 获取需要添加样式的元素
var element = document.getElementById("example");
// 修改元素的CSS样式
element.style.color = "red";
element.style.backgroundColor = "green";
别小瞧这个步骤，真的挺容易的~如果你想把点儿CSS加到JavaScript里，就这么干：第一招就是用DOM导入；第二招是改变HTML元素的类表；第三招更直接，直接在CSS上动起手来。
评论0