не работает атрибут class в теге <td>
Подскажите, в чем подвох. JS класс изменяет, но цвет текста меняется на черный, а не на зеленый.
<html>
<head>
<title>Test1</title>
<style type="text/css">
table .c { color: red }
.a .c { color: green }
</style>
<script type="text/javascript">
function test1()
{
//document.getElementById("t").children[0].children[0].children[0].className=('class', 'a');
document.getElementById('t').getElementsByTagName('td')[0].setAttribute('class', 'a')
}
</script>
</head>
<body onmousedown="test1()">
<table id="t">
<tr>
<td class="c">Текст</td>
</tr>
</table>
</body>
</html>
|
Цитата:
Ты точно правильный селектор написал? Цитата:
document.querySelector('#t td').className = 'a';
|
<style type="text/css">
table .c { color: red }
.a.c { color: green }
</style>
<body onmousedown="test1()">
<table id="t">
<tr>
<td class="c">Текст</td>
</tr>
</table>
<script type="text/javascript">
function test1(){
document.querySelectorAll('#t td')[0].className = 'a c';
}
</script>
а так работат |
Спасибо.
А почему тогда так не работает:
document.getElementById('t').getElementsByTagName('td')[0].setAttribute('class', 'a c')
|
<style type="text/css">
table .c { color: red }
.a.c { color: green }
</style>
<body onmousedown="test1()">
<table id="t">
<tr>
<td class="c">Текст</td>
</tr>
</table>
<script type="text/javascript">
function test1(){
document.getElementById('t').getElementsByTagName('td')[0].setAttribute('class', 'a c');
}
</script>
|
Работает!
То есть селекторы потомков типа .a.c нужно писать без пробела? |
Причем тут селекторы потомков Даниил же кратко тебе намекнул
Цитата:
<style>
.a.b {
color: red;
}
.a .b {
color: green;
}
</style>
<div class="a b">.a.b
<div class="b">.a .b</div>
</div>
|
Цитата:
Никогда не пиши .setAttribute('class', 'a'). Всегда пиши .className = 'a' Вместо всяких getElement[s]By*** используй querySelector/querySelectorAll. Чо ты упертый-то такой )) |
| Часовой пояс GMT +3, время: 00:50. |