2016-04-19 12 views
-3

ボタンの押下に応じてJSイベントを呼び出そうとしています(3つのボタンがあります)いくつかのCSSがフォントサイズを変更したいのですがうまくいかない。誰も助けることができますか?私は、フォントサイズを設定するには、ラッパーのdivを追加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>

+2

あなたがすることはできません再利用IDは...彼らは、各ページ上で一意でなければなりません。 –

+0

IDの何ですか?ボタン? – Jhon122

+1

テーブルのIDはすべて同じです。 "Maintbl" –

答えて

0

は、から構文エラーを修正しました...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>

関連する問題