隨機更改CSS樣式

Question

我試圖使單元格隨樣式一起更改顏色。 我不知道什么是最好的。 可以將其放在CSS樣式表中，也可以直接放在html中。 如果有人可以幫助我，我對此感到困惑。 感謝任何貢獻者。

HTML代碼：

<html>

<head>
<title>HTML and JavaScript</title>
<link href="Capstone 10_2.css" rel="stylesheet" type="text/css"></link>
<script>
function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }


  function stylize() 
  {
    var index = getRandomInt(1, 20);
    var s = "myStyle" + index;
    var e = document.getElementById("MessageText");
    e.className = s;
    setTimeout("stylize()", 1500);
    return;
  }

 </script>
 </head>

 <body onLoad="stylize()">
  <table align="center" border="1" bordercolor="black">
   <tr>
    <td align="center">
     <font size="3"><b>STYLE CLASS VIEWER</b></font>
    </td>
   </tr>
   <tr>
    <td align="center" height="100" width="400">
     <div id="MessageText" class="myStyle1">
      Hello World Wide Web!
     <div>
    </td>
   </tr>
  </table>
 </body>

</html>

CSS代碼：

.myStyle1 {font-family:Impact; color:black; font-size:10; backgroundcolor: black}
.myStyle2 {font-family:Georgia; color:black; font-size:18; backgroundcolor: black}
.myStyl31 {font-family:Tahoma; color:red; font-size:24; backgroundcolor: black}
.myStyle4 {font-family:Verdana; color:black; font-size:48; backgroundcolor: black}
.myStyle5 {font-family:Impact; color:red; font-size:30; backgroundcolor: black}
.myStyle6 {font-family:Marlett; color:green; font-size:35; backgroundcolor: black}
.myStyle7 {font-family:Arial; color:blue; font-size:40; backgroundcolor: black}
.myStyle8 {font-family:Courier Sans MS Bold; color:blue; font-size:30; backgroundcolor: black}
.myStyle9 {font-family:Impact; color:blue; font-size:35; backgroundcolor: black}
.myStyle10 {font-family:Arial Italic; color:blue; font-size:10; backgroundcolor: black}
.myStyle11 {font-family:Times New Roman; color:blue; font-size:50; backgroundcolor: black}
.myStyle12 {font-family:Tahoma; color:blue; font-size:38; backgroundcolor: black}
.myStyle13 {font-family:Verdana; color:green; font-size:30; backgroundcolor: black}
.myStyle14 {font-family:Marlett; color:blue; font-size:20; backgroundcolor: black}
.myStyle15 {font-family:Impact; color:blue; font-size:24; backgroundcolor: black}
.myStyle16 {font-family:Georgia; color:blue; font-size:24; backgroundcolor: black}
.myStyle17 {font-family:Impact; color:blue; font-size:35; backgroundcolor: black}
.myStyle18 {font-family:Georgia; color:red; font-size:12; backgroundcolor: black}
.myStyle19 {font-family:Arial; color:green; font-size:20; backgroundcolor: black}
.myStyle20 {font-family:Tahoma; color:blue; font-size:55; backgroundcolor: black}

我不知道是否使用此：

var cells = document.getElementsByTagName('MessageText'),
    colors = ['000000','FF0000','00FF00','0000FF','FFFF00','00FFFF','FF00FF','C0C0C0'];

for(var i = 0; i < cells.length; i++) {
    cells[i].style.backgroundColor = '#' + colors[Math.floor(Math.random() * colors.length)];
}

也許我離此代碼還很遙遠。

Answer 1

這是一個使用HTML和CSS的小演示，它允許單元格背景顏色和文本樣式在頁面加載時隨機更改。

CSS將保持不變。 我對HTML所做的唯一真正的添加就是在TD元素上添加了一個id，並正確關閉了div標簽。

HTML代碼：

<body>
  <table align="center" border="1" bordercolor="black">
    <tr>
      <td align="center">
        <font size="3"><b>STYLE CLASS VIEWER</b></font>
      </td>
    </tr>
    <tr>
      <td id="MessageCell" align="center" height="100" width="400">
        <div id="MessageText" class="myStyle1">
          Hello World Wide Web!
        </div>
      </td>
    </tr>
  </table>
</body>

JavaScript：

var messageCell = document.getElementById('MessageCell');
var messageText = document.getElementById('MessageText');

function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

function setRandomColor() {
  messageCell.setAttribute("style","background-color: " + getRandomColor() + ";");
}

function setRandomClass() {
    var randomStyleNumber = getRandomInt(1, 20);
    messageText.setAttribute("class", 'myStyle' + randomStyleNumber);
}

function stylize() {
    setRandomClass();
    setRandomColor();
}

stylize();

這是一個JSFiddle示例：

https://jsfiddle.net/4t6etg7c/1/

希望對您有所幫助，祝您學習愉快！

Answer 2

使用JavaScript設置所有 CSS值。

el.style.fontSize = ...
el.style.color = ...
el.style.backgroundColor = ...
el.style.fontFamily = ...

不再需要編寫多個CSS類。

 function getRandColor() { var hex = "01234567890ABCDEF", res = "#"; for (var i = 0; i < 6; i += 1) { res += hex[Math.floor(Math.random() * hex.length)]; } return res; } function getRandNumber(s, e) { return Math.floor(Math.random() * (e - s + 1)) + s; } function getRandFontFamily() { var fontFamilies = ["Impact", "Georgia", "Tahoma", "Verdana", "Impact", "Marlet"]; // Add more return fontFamilies[Math.floor(Math.random() * fontFamilies.length)]; } function stylize() { var text = document.getElementById("text"); var interval = setInterval(function() { text.style.fontFamily = getRandFontFamily(); text.style.color = getRandColor(); text.style.fontSize = getRandNumber(15, 35) + "px"; // Font sizes between 15px and 35px text.style.backgroundColor = getRandColor(); }, 1500); } stylize();

 <table align="center" border="1" bordercolor="black"> <tr> <td align="center"> <font size="3"><b>STYLE CLASS VIEWER</b></font> </td> </tr> <tr> <td align="center" height="100" width="400"> <div id="text"> Hello World Wide Web! </div> </td> </tr> </table>

備注

在<body>的末尾運行JavaScript

<body>
...
<script>
...
</script>
</body>

或在<head>

<head>
<script>
 ...
 document.addEventListener("DOMContentLoaded", function() {
     stylize()
 });
</script>
</head>

隨機更改CSS樣式

問題描述

2 個解決方案

解決方案1
0 2017-12-10 19:42:57

解決方案2
0 2017-12-10 22:41:35

隨機更改CSS樣式

問題描述

2 個解決方案

解決方案1 0 2017-12-10 19:42:57

解決方案2 0 2017-12-10 22:41:35

解決方案1
0 2017-12-10 19:42:57

解決方案2
0 2017-12-10 22:41:35