Есть ли способ не только добавить / удалить класс к элементу HTML, но и фактически изменить значение в классе CSS? - PullRequest
Новая
       0

Есть ли способ не только добавить / удалить класс к элементу HTML, но и фактически изменить значение в классе CSS?

0 голосов
/ 22 мая 2018

Как, например: я хочу показать случайные цвета фона, нажав кнопку.Я смазал переменные, которые привели бы к обычному шестнадцатеричному коду, если бы я соединил строки ... Только как я могу записать эти случайные значения в файл CSS?Есть ли способ?

Я не хочу менять имя класса, но что имя класса содержит в качестве значения стиля для 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 ]

0 голосов
/ 22 мая 2018

Это то, что у нас есть атрибут стиля для 

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>
0 голосов
/ 22 мая 2018

Вы можете использовать событие onClick при нажатии кнопки для вызова функции changeColor(). 

<Button
       onClick={event => {
       event.preventDefault();
       this.changeColor();
    }}
>
0 голосов
/ 22 мая 2018

Если вы хотите изменить встроенные стили, вы можете взглянуть на эту страницу:

Изменение стиля HTML - чтобы изменить стиль элемента HTML, используйте этот синтаксис:

document.getElementById(id).style.property = new style В следующем примере изменяется стиль элемента <p>:

Пример: 

<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>

Или 

 <!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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...