是否可以基于javascript对象或变量创建一个css类?
例如,如果您有输入,您可以输入十六进制代码。我可以使用javascript提取值并将其设置为var。
然后我可以使用此var来使用javascript设置内联样式,从而更改页面上文本的颜色。但是有没有办法可以使用这个var并创建一个css类?我不是遍历页面的所有元素并设置颜色,而是在页面的一个元素上添加一个类,然后将这些类型嵌套在该类中,以级联到其他元素。
答案 0 :(得分:2)
在页面加载后动态改变css样式的很多方法。 如果您想要进行更改,就像它是普通的css脚本一样,您可以通过javascript向标题添加样式标记。 例如
var color = "blue" ; // from your input
var element = document.createElement("style");
element.id = "myStyleId" ; // so you can get and alter/replace/remove later
element.innerHTML = ".myClass {color:" + color + ";}" ; // css rule
var header = document.getElementsByTagName("HEAD")[0] ;
header.appendChild(element) ;
答案 1 :(得分:0)
喜欢这个好友的东西? https://jsfiddle.net/BillyG83/hcek46a1/2/
为你做的,周五快乐
这是代码
<!DOCTYPE html>
<html>
<head>
<title>Test HTML</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<input type="text" id="textBox"/>
<input type="button" id="submit" value="Go"/>
</body>
<script type="text/javascript">
$("#submit").click(function(){
var textBoxValue = $("#textBox").val();
if (textBoxValue.length == 0) {
alert("you didnt enter a value");
} else if (textBoxValue.length < 6) {
alert("you only entered " + textBoxValue.length + " chacters, a HEX code needs 6");
} else if (textBoxValue.length == 6) {
var newHEXcode = "#" + textBoxValue;
alert("new HEX code = " + newHEXcode)
} else {
alert("you only entered " + textBoxValue.length + " chacters, thats too many, a HEX code needs 6");
}
});
</script>
</html>
答案 2 :(得分:0)
在此示例中,如果输入十六进制值,如FFFF00
或800000
或FF0000
,则会更改文本Hello Pratik Ghag!
的背景css。
$("#txtInput").change(function(){
var color = "#"+$("#txtInput").val();
$(".spnMessage").css("background",color);
})
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Enter hex color code:</p>
<input id="txtInput" /><br>
<span class="spnMessage">Hello Pratik Ghag!</span>
&#13;