javascript重写不适用于文本对齐

Question

​

function testit(){
document.getElementById("th1").style.textAlign = "right";
}

#th1{
text-align:left;
}

<table>
		 <tr><center><th colspan="2" id="th1">EmergencyImportantContactsnumbers</th><center></tr>
		 <tr><th colspan="2" id="th1" >Emergency.SQUCampus</tr></tr>
		 <tr><th>Emergency.m1</th><th id="th1" >Emergency.m2</th><tr>
		 <tr><td>Emergency.m3</td><td id="th1" >Emergency.m4</td></tr>
		 <tr><td>Emergency.m5</td><td id="th1" >Emergency.m6</td></tr>
		 
		 </table>
<button onclick="testit();">Text Script</button>

​

我想更改表格中单元格的文本对齐。我使用了javascript来更改文本对齐。当我编辑样式代码时，它不起作用。

我想将th1文本对齐改为右对齐。但我的代码不起作用。请帮我谢谢。

Answer 1

就像这样：

HTML：

<table>
         <tr><center><th colspan="2" class="th1">EmergencyImportantContactsnumbers</th><center></tr>
         <tr><th colspan="2" class="th1" >Emergency.SQUCampus</tr></tr>
         <tr><th>Emergency.m1</th><th class="th1" >Emergency.m2</th><tr>
         <tr><td>Emergency.m3</td><td class="th1" >Emergency.m4</td></tr>
         <tr><td>Emergency.m5</td><td class="th1" >Emergency.m6</td></tr> 
</table>

使用类而不是id。

CSS：

table{
  width: 400px;
}
.th1{
  text-align:left;
  padding: 3px;
  border: 1px solid black;
}

联署材料：

var th1 = document.getElementsByClassName("th1");
for (var i = 0; i < th1.length; i += 1) {
    th1[i].style.textAlign = "right";
}

Answer 2

首先，您不需要使用<center>标记。其次，ID是唯一的，因此您需要使用类。最后，由于标记了JQuery，所以一旦DOM准备就绪，就可以使用css()将CSS分配给元素：

​

/*$(document).ready(function() {
  $(".th1").css({
    'text-align': 'right'
  });
});
*/

var element = document.getElementsByClassName("th1");
for (var i = 0; i < element.length; i++) {
    element[i].style.textAlign = 'right';
}

.th1 {
  text-align: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th colspan="2" class="th1">EmergencyImportantContactsnumbers</th>
  </tr>
  <tr>
    <th colspan="2" class="th1">Emergency.SQUCampus</th>
  </tr>
  <tr>
    <th>Emergency.m1</th>
    <th id="th1">Emergency.m2</th>
    <tr>
      <tr>
        <td>Emergency.m3</td>
        <td id="th1">Emergency.m4</td>
      </tr>
      <tr>
        <td>Emergency.m5</td>
        <td id="th1">Emergency.m6</td>
      </tr>

</table>

​

更新：也添加了JavaScript代码并注释了JQuery代码。