CSS 및 JS에서 CSS 스타일 시트를 변경하는 방법은 무엇입니까?
Dec 02 2020
function colorChanger() {
var len = document.getElementById("string").value.length;
if (len < 50) {
style1.onclick = swapStyleSheet("first_50.css");
} else if (len > 50 && len < 100) {
style1.onclick = swapStyleSheet("second_100.css");
}
}
function swapStyleSheet(sheet){
document.getElementById('css_style').setAttribute('href', sheet);
}
이것은 내 코드입니다. 문자 수가 다음 less than 50과 같으면 스타일 시트를 변경하고 싶습니다.more than 50 and less than 100
내 코드가 작동하지 않습니다
답변
3 RamSaini Dec 02 2020 at 14:11
이것은 스타일 시트를 변경하는 내 코드입니다.
<html>
<head>
<title>
Change Css
</title>
<script lang="javascript">
function colorChanger() {
var len = document.getElementById("string").value.length;
if (len < 50) {
swapStyleSheet("first_50.css");
} else if (len > 50 && len < 100) {
swapStyleSheet("second_100.css");
}
}
function swapStyleSheet(strName) {
document.getElementById("cssChanger").href = strName;
}
</script>
<link href="first_50.css" id="cssChanger" />
</head>
<body>
<input type="text" id="string" value=""></input>
<input type="button" id='style1' value="Change Css" onclick="javascritpt:colorChanger();">
</body>
</html> ````
2 Md.RafiulIslamShohan Dec 02 2020 at 13:37
function changeCSS(cssFile, cssLinkIndex) {
var oldlink = document.getElementsByTagName("link").item(cssLinkIndex);
var newlink = document.createElement("link");
newlink.setAttribute("rel", "stylesheet");
newlink.setAttribute("type", "text/css");
newlink.setAttribute("href", cssFile);
document.getElementsByTagName("head").item(0).replaceChild(newlink, oldlink);
}
function colorChanger() {
var len = document.getElementById("string").value.length;
if (len < 50) {
changeCSS("first_50.css",index); // index is head tag child element index ex:0
} else if (len > 50 && len < 100) {
changeCSS("second_100.css",index);// index is head tag child element index ex:0
}
}
1 H4CKTRIK Dec 02 2020 at 14:09
좋아, 나는 그것을 알아 냈고, 전체 스타일 시트를 바꿀 필요가 없으므로 CSS를 DOM에 다시로드해야합니다. element.classList.remove ( 'good-tier')