Como alterar a folha de estilo css em CSS e JS?
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);
}
Este é o meu código, quero alterar a folha de estilo se a contagem de caracteres for less than 50emore than 50 and less than 100
Meu código não está funcionando
Respostas
3 RamSaini Dec 02 2020 at 14:11
Este é o meu código, ele está mudando a folha de estilo.
<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
Ok, eu descobri, não preciso trocar folhas de estilo inteiras, portanto, tenho que recarregar o css no DOM. Posso apenas usar element.classList.remove ('good-tier')
O que significa um erro “Não é possível encontrar o símbolo” ou “Não é possível resolver o símbolo”?
Christopher Nolan uma vez se arrependeu de ter lido o 'roteiro de Pulp Fiction' de Quentin Tarantino