Пример.
Есть таблица
<table class="StringGrid">
<tr><td class="Cell"><input class="Cell" type="text"></td> <td class="Cell"><input class="Cell" type="text"></td> <td class="Cell"><input class="Cell" type="text"></td></tr>
<tr><td class="Cell"><input class="Cell" type="text"></td><td class="Cell"><input class="Cell" type="text"></td><td class="Cell"><input class="Cell" type="text"></td></tr>
</table>
и есть файл со стилями этой таблицы
.StringGrid, .Cell{
margin:0;
padding:0;
}
.StringGrid{
width: 150px;
height: 40px;
border: none;
border-collapse:collapse;
}
.Cell{
display:table-cell;
width:50px;
height:20px;
}
Можно ли программно изменить свойства класса Cell. Например, чтоб при изменении ширины таблицы менялась ширина столбцов, или поставить всем ячейкам ReadOnly и т.д. Или обязательно делать поиск всех элементов с таким классом и им прописывать необходимые свойства через style:
var t=document.getElementsByClassName('StringGrid')[0];
t.style.width='210px';
// вместо перебора хотелось бы что-то в духе document.CSS.Class['Cell'].width = parseInt(t.style.width)/3)+'px';
var cells=t.getElementsByClassName('Cell');
cells.forEach=[].forEach;
cells.forEach(function(item, i, arr){item.style.width = parseInt( parseInt(t.style.width)/3)+'px'});