使用JS更改css

时间:2016-04-19 19:14:52

标签: javascript html 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;
	 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 个答案:

答案 0 :(得分:0)

Spring不是sqoop import --connect jdbc:oracle:thin:hud_reader/hud_reader_n1le@huiprd_nile:1527 --username hud_reader --password hud_reader_n1le --table <DATAAGGRUN> --target-dir C:\hadoop\hdp\temp --m 1

演示https://jsfiddle.net/eLrdeagq/

fontSize

答案 1 :(得分:0)

像这样,我添加了一个包装器div来设置字体大小,将语法错误从...style.font-size更正为...style.fontSize并删除了重复的ID(因为它们应该是唯一的) )。

&#13;
&#13;
function textSizeS(){
  document.getElementById("MaintblWrapper").style.fontSize = "3px";
}

function textSizeM(){
  document.getElementById("MaintblWrapper").style.fontSize = "26px";
}

function textSizeL(){
  document.getElementById("MaintblWrapper").style.fontSize = "45px";
}
&#13;
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%;
  }
&#13;
<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>  
&#13;
&#13;
&#13;