1. 首頁
  2. 問答
  3. 使用JS更改css

使用JS更改css

2016-04-19 63 views
-3

我想調用一個JS事件，具體取決於按鈕按鈕（有三個按鈕）我想要一些CSS來更改字體大小（每個按鈕的不同），但我有什麼不行。誰能幫忙？使用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; 
 
\t background-color: #FF9933; 
 
    width: 50%; 
 
    padding-top: 10px; 
 
    padding-left: 100px; 
 
\t padding-right: 100px; 
 
\t 
 
} 
 
    
 
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> 
 
\t 
 
    </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> 
 
\t 
 
    </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>

來源

2016-04-19 Jhon122

+2

你不能再使用的ID ......他們必須在每一頁上是唯一的。 –

+0

ID的是什麼？按鈕？ – Jhon122

+1

這些表都具有相同的ID。 「Maintbl」 –

回答

0

與此類似，其中I加入一個包裝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; 
 
\t background-color: #FF9933; 
 
    width: 50%; 
 
    padding-top: 10px; 
 
    padding-left: 100px; 
 
\t padding-right: 100px; 
 
\t 
 
} 
 
    
 
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> 
 
\t 
 
    </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> 
 
\t 
 
    </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>

來源

2016-04-19 19:24:40 LGSon

相關問題

 相關問題