隨著前端技術(shù)的發(fā)展，現(xiàn)在的網(wǎng)頁布局越來越豐富，css文件的引入也變得越來越復(fù)雜。而有時(shí)候我們需要修改外鏈的css文件，這時(shí)候使用js來修改css，可以幫助我們快速地實(shí)現(xiàn)目標(biāo)。
下面我們來演示使用js來修改外鏈css的步驟。首先，需要在head部分添加如下外鏈css：
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>然后，我們就可以在下面的js代碼中修改對(duì)應(yīng)的css屬性了：
var links = document.getElementsByTagName("link");
for (var i = 0; i< links.length; i++) {
var link = links[i];
if (link.getAttribute("href") == "style.css") {
var sheet = link.sheet;
var rules = sheet.cssRules || sheet.rules;
for (var j = 0; j< rules.length; j++) {
var rule = rules[j];
if (rule.selectorText.toLowerCase() == ".nav") {
rule.style.backgroundColor = "red";
}
}
}
}以上代碼中，我們先用getElementsByTagName方法獲取所有的link標(biāo)簽，然后通過循環(huán)尋找我們需要修改的css文件（這里我們使用的是style.css）。然后我們?nèi)〉眠@個(gè)css文件（sheet）中的所有css規(guī)則（rules），再通過循環(huán)尋找我們需要修改的css規(guī)則（這里我們使用的是.nav）。最后，我們就可以通過rule.style.XXX來修改css屬性。
總的來說，使用js來修改外鏈的css文件不僅可以幫助我們快速地實(shí)現(xiàn)特定的設(shè)計(jì)需求，還可以增進(jìn)我們對(duì)js和css的理解和掌握。