使用 JS 更改 css
[英]change css using JS
問題描述
我正在嘗試調用一個 JS 事件，具體取決於按下的按鈕，（有三個按鈕）我想要一些 CSS 來更改字體大小（每個按鈕不同），但是我所擁有的不起作用。 有人可以幫忙嗎？
body { background-image: url("back2.jpg"); background-size: 100% 100%; } .buttonSize1{ font-size: 3px; } .buttonsize2{ font-size: 26px; } .buttonsize3{ font-size: 45px; } .fixed { position: fixed; Top: 100px; Left: 0px; width: 150px; border: #0E6B5B 3px solid; background-color: #FF9933; } p { padding-left: 100px; } td { padding-top: 10px; padding-bottom: 50px; text-align: center; font-family: "Lucida Console", Monaco, monospace; } .opac { opacity: 0.5; filter: alpha(opacity=10); /* For IE8 and earlier */ } .opac:hover { opacity: 1.0; filter: alpha(opacity=100); /* For IE8 and earlier */ } .MainTable{ border: #0E6B5B 3px solid; background-color: #FF9933; width: 50%; padding-top: 10px; padding-left: 100px; padding-right: 100px; } table.center { width:70%; margin-left:15%; margin-right:15%; }
<!doctype html> <html> <head> <link rel="stylesheet" href="7Global.css"/> <title> CSGO </title> <script> function textSizeS(){ document.getElementById("Maintbl").style.font-size = "3px"; } function textSizeM(){ document.getElementById("Maintbl").style.font-size = "26px"; } function textSizeL(){ document.getElementById("Maintbl").style.font-size = "45px"; } </script> </head> <body> <table class = "fixed opac"> <tr> <td><a href="Index.html">Home</a> </td> </tr> <tr> <td><a href="3Maps.html">Maps</a> </td> </tr> <tr> <td><a href="4CT.html">Counter <br/> Terrorists</a> </td> </tr> <tr> <td><a href="5T.html">Terrorists</a> </td> </tr> <tr> <td><a href="6About.html">About</a> </td> </tr> <tr> <td><button class="buttonsize1" onclick="textSizeS()">A</button> <button class= "buttonsize2" onclick="textSizeM()">A</button> <button class= "buttonsize3" onclick="textSizeL()">A</button></td> </tr> </table> <br/> <br/> <br/> <table id = "Maintbl" class = "MainTable center"> <td> CS:GO's Next Major </td> <tr> <td> Europe Region – Hosted by DreamHack </td> </tr> </table> <table id = "Maintbl" class = "MainTable center"> <td> Operation Wildfi </td> <tr> <td> What's new? Visit the page below for details! </td> </tr> </table> <table id = "Maintbl" class = "MainTable center"> <td> We made some adjustments to rifles recently... </td> <tr> <td> nCS:GO. M </td> </tr> </table> </body> </html>
2 個解決方案
解決方案1
0 2016-04-19 19:24:24
fontSize不是font-size
演示https://jsfiddle.net/eLrdeagq/
function textSizeS(){
document.getElementById("Maintbl").style.fontSize = "3px";
}
解決方案2
0 已采納 2016-04-19 19:24:40
像這樣，我添加了一個包裝 div 來設置字體大小，將語法錯誤從...style.font-size更正為...style.fontSize並刪除了重復的 id（因為它們應該是唯一的）。
function textSizeS(){ document.getElementById("MaintblWrapper").style.fontSize = "3px"; } function textSizeM(){ document.getElementById("MaintblWrapper").style.fontSize = "26px"; } function textSizeL(){ document.getElementById("MaintblWrapper").style.fontSize = "45px"; }
body { background-image: url("back2.jpg"); background-size: 100% 100%; } .buttonSize1{ font-size: 3px; } .buttonsize2{ font-size: 26px; } .buttonsize3{ font-size: 45px; } .fixed { position: fixed; Top: 100px; Left: 0px; width: 150px; border: #0E6B5B 3px solid; background-color: #FF9933; } p { padding-left: 100px; } td { padding-top: 10px; padding-bottom: 50px; text-align: center; font-family: "Lucida Console", Monaco, monospace; } .opac { opacity: 0.5; filter: alpha(opacity=10); /* For IE8 and earlier */ } .opac:hover { opacity: 1.0; filter: alpha(opacity=100); /* For IE8 and earlier */ } .MainTable{ border: #0E6B5B 3px solid; background-color: #FF9933; width: 50%; padding-top: 10px; padding-left: 100px; padding-right: 100px; } table.center { width:70%; margin-left:15%; margin-right:15%; }
<table class = "fixed opac"> <tr> <td><a href="Index.html">Home</a> </td> </tr> <tr> <td><a href="3Maps.html">Maps</a> </td> </tr> <tr> <td><a href="4CT.html">Counter <br/> Terrorists</a> </td> </tr> <tr> <td><a href="5T.html">Terrorists</a> </td> </tr> <tr> <td><a href="6About.html">About</a> </td> </tr> <tr> <td><button class="buttonsize1" onclick="textSizeS()">A</button> <button class= "buttonsize2" onclick="textSizeM()">A</button> <button class= "buttonsize3" onclick="textSizeL()">A</button></td> </tr> </table> <br/> <br/> <br/> <div id = "MaintblWrapper"> <table class = "MainTable center"> <td> CS:GO's Next Major </td> <tr> <td> Europe Region – Hosted by DreamHack </td> </tr> </table> <table class = "MainTable center"> <td> Operation Wildfi </td> <tr> <td> What's new? Visit the page below for details! </td> </tr> </table> <table class = "MainTable center"> <td> We made some adjustments to rifles recently... </td> <tr> <td> nCS:GO. M </td> </tr> </table> </div>
使用JS更改按鈕CSS
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.