有没有一种方法不仅可以在HTML元素中添加/删除类，还可以实际更改CSS类中的值？
[英]Is there a way of not only adding/removing a class to an HTML element but actually change the value within a CSS class?
问题描述
As for example: I wanna show random background colors by pressing a button. 
例如：我想通过按下按钮来显示随机的背景颜色。 I greated variables which would result in a usual hex-code if I put the strings together... Only how can I write these random values into the CSS file? 我放宽了将这些字符串放在一起会导致通常的十六进制代码的变量...仅如何将这些随机值写入CSS文件？ Is there any way? 有什么办法吗？
I do not wanna change the class name, but what the class name contains as a style-value for background-color! 我不想更改类名，但是要更改类名作为background-color的样式值！
function changeColor() {
var content = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f", "g"];
var one = content[Math.floor(Math.random()*content.length)];
var two = content[Math.floor(Math.random()*content.length)];
var three = content[Math.floor(Math.random()*content.length)];
var four = content[Math.floor(Math.random()*content.length)];
var five = content[Math.floor(Math.random()*content.length)];
var six = content[Math.floor(Math.random()*content.length)];
3 个解决方案
解决方案1
3 已采纳 2018-05-21 22:02:29
If you want to change inline styles you can take a look at this page: 如果要更改内联样式，可以查看以下页面：
Changing HTML Style - To change the style of an HTML element, use this syntax:
document.getElementById(id).style.property = new styleThe following example changes the style of a<p>element:document.getElementById(id).style.property = new style以下示例更改<p>元素的样式：Example:
<html> <body> <p id="p2">Hello World!</p> <script> document.getElementById("p2").style.color = "blue"; </script> <p>The paragraph above was changed by a script.</p> </body> </html>
<!DOCTYPE html> <html> <body> <h1 id="id1">My Heading 1</h1> <button type="button" onclick="document.getElementById('id1').style.color = 'red'"> Click Me!</button> </body> </html>
Or 要么
<!DOCTYPE html> <html> <body> <h1 id="id1" style="color: blue">My Heading 1</h1> <button type="button" onclick="document.getElementById('id1').style = 'color: red'"> Click Me!</button> </body> </html>
解决方案2
2 2018-05-21 22:05:36
This is what we have the style attribute for 这就是我们具有的style属性
function change(){ var content = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f", "g"]; var one = content[Math.floor(Math.random()*content.length)]; var two = content[Math.floor(Math.random()*content.length)]; var three = content[Math.floor(Math.random()*content.length)]; var four = content[Math.floor(Math.random()*content.length)]; var five = content[Math.floor(Math.random()*content.length)]; var six = content[Math.floor(Math.random()*content.length)]; document.getElementById("element").style.backgroundColor = "#"+one+two+three+four+five+six }
<div id="element"> see the background </div> <button onclick="change()">change</button>
解决方案3
0 2018-05-21 22:26:33
You can use the onClick event on the button press to call the changeColor() function. 您可以在按下按钮时使用onClick事件来调用changeColor()函数。
<Button
onClick={event => {
event.preventDefault();
this.changeColor();
}}
>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.