JavaScript的DOM重寫不工作的文本對齊

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

#th1{ 
 
text-align:left; 
 
}

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

我想更改單元格的文本對齊表格。我已經使用JavaScript來改變文本對齊。當我重新編輯樣式代碼時，它不起作用。

我想將th1文本對齊更改爲正確。但我的代碼不起作用。請幫我謝謝你。

來源

2017-08-01 Joe

id必須是唯一的，請使用class而不是 – Luke

使您的id成爲類。 –

使ID唯一，'th'應該是'tr'的直接子，而不是'

事情是這樣的：

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; 
}

JS：

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

來源

2017-08-01 09:04:26

這裏是jsfiddle https://jsfiddle.net/w9ja39gd/4/ –

首先，你不需要<center>標籤。其次，ID是唯一的，因此你需要使用類。最後，既然你已經標記JQuery，您可以使用css()一旦DOM就緒分配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代碼。

來源

2017-08-01 09:01:29

可以重寫代碼的JavaScript。 – Joe

你想用JavaScript嗎？你爲什麼標記JQuery？ –

給你。

<style> 
    #th1{ 
    text-align:left; 
    } 
    .th2{ 
    text-align:right !important; 

    } 
    </style> 

    <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> 
    <script> 
     $(document).ready(function() { 

     $('table #th1 ').addClass("th2"); 
     }); 
    </script>

來源

2017-08-01 09:27:47

JavaScript的DOM重寫不工作的文本對齊

回答

相關問題