Автор Данил задал вопрос в разделе JavaScript
Как узнать ширину первых трех элементов li? на js, не jquery и получил лучший ответ
Ответ от Denwer Lollipop[гуру]
pastebin.com
Это не реклама, а так, на будущее.
Ответ: getComputedStyle(document.querySelector(".slider li")).width
Denwer Lollipop
Мастер
(1972)
В смысле лучше? Там даже разные цифры возвращаются. Computed style - это то число, которое вы увидите в инспекторе, а offsetWidth - это сумма ширины, паддингов, бордеров и скроллбара.
Таким образом, лучше или хуже оно быть не может, все зависит от задачи. Могу только сказать, что все это в реальных проектах одинаково плохо, потому что вряд ли это можно использовать для чего-то кроме исправления скриптами криворукой верстки.
Ответ от Ди Ма[гуру]
первых трех
первых трех
Ответ от Artem Filippoff[эксперт]
я тут писал код для закрепления заголовка таблицы, если у таковой прописан правильный класс
там есть кусок кода, где я определяю ширину ячеек первой строки (без учета хедера)
может быть, поможет...
function UpdateTDWidth()
{
this.tables = document.getElementsByClassName('table-with-fixed-th');
this.i = 0;
while(typeof (this.tables[i])!='undefined')
{
this.ths = this.tables[i].getElementsByTagName('th');
this.tds = this.tables[i].getElementsByTagName('td');
this.thead = this.tables[i].getElementsByTagName('thead');
this.tr = this.tables[i].getElementsByTagName('tr');
if(
typeof (this.thead[0])!='undefined'
&&
typeof (this.tr[0])!='undefined'
)
{
this.thead[0].style.width = this.tables[i].clientWidth+'px'; // ширина thead должена совпарать с table
this.thead[0].style.maxWidth = this.tables[i].clientWidth+'px';
this.h_height = this.thead[0].clientHeight;
this.tables[i].style.margin = this.thead[0].clientHeight+'px 0px 0px 0px';//спустим основную таблицу маргином на высоту хедера
this.table_pos = this.tables[i].getBoundingClientRect().top + window.pageYOffset;
this.table_bottom = this.tables[i].getBoundingClientRect().bottom + window.pageYOffset;
this.table_left = this.tables[i].getBoundingClientRect().left + window.pageXOffset;
if ( window.pageYOffset + h_height < this.table_pos)
{
this.thead[0].style.top = (this.table_pos - window.pageYOffset - this.h_height)+'px';
//если таблица в середине экрана, заголовок должен быть прилеплен к не как обычно
}
else this.thead[0].style.top = 0;
//если таболица уехала высоко. то заголовок должен висеть вверху экрана
if ( window.pageYOffset + this.h_height > this.table_bottom)
{
this.thead[0].style.top = (this.table_bottom - window.pageYOffset - this.h_height)+'px';
//если низ таблицы уехал вверх, прилепляем заголовок к низу таблицы
}
this.thead[0].style.left = (this.table_left - window.pageXOffset)+'px';
//заголовок должен следить за положением таблицы по горизонтали
}
this.i2 = 0;
while(typeof (this.ths[i2])!='undefined')
{
this.border_w = Number(getComputedStyle(this.tds[i2]).borderLeftWidth.substring(0,1))
+
Number(getComputedStyle(this.tds[i2]).borderRightWidth.substring(0,1))
;
//this.border_w = Number(this.border_w.substring(0,1));
//alert (this.border_w);
this.ths[i2].style.width = this.tds[i2].clientWidth+this.border_w +'px'; //ширины ячеек thead должны равняться на первые td
this.ths[i2].style.maxWidth = this.tds[i2].clientWidth+this.border_w +'px';
this.i2++;
}
this.i++;
}
}
я тут писал код для закрепления заголовка таблицы, если у таковой прописан правильный класс
там есть кусок кода, где я определяю ширину ячеек первой строки (без учета хедера)
может быть, поможет...
function UpdateTDWidth()
{
this.tables = document.getElementsByClassName('table-with-fixed-th');
this.i = 0;
while(typeof (this.tables[i])!='undefined')
{
this.ths = this.tables[i].getElementsByTagName('th');
this.tds = this.tables[i].getElementsByTagName('td');
this.thead = this.tables[i].getElementsByTagName('thead');
this.tr = this.tables[i].getElementsByTagName('tr');
if(
typeof (this.thead[0])!='undefined'
&&
typeof (this.tr[0])!='undefined'
)
{
this.thead[0].style.width = this.tables[i].clientWidth+'px'; // ширина thead должена совпарать с table
this.thead[0].style.maxWidth = this.tables[i].clientWidth+'px';
this.h_height = this.thead[0].clientHeight;
this.tables[i].style.margin = this.thead[0].clientHeight+'px 0px 0px 0px';//спустим основную таблицу маргином на высоту хедера
this.table_pos = this.tables[i].getBoundingClientRect().top + window.pageYOffset;
this.table_bottom = this.tables[i].getBoundingClientRect().bottom + window.pageYOffset;
this.table_left = this.tables[i].getBoundingClientRect().left + window.pageXOffset;
if ( window.pageYOffset + h_height < this.table_pos)
{
this.thead[0].style.top = (this.table_pos - window.pageYOffset - this.h_height)+'px';
//если таблица в середине экрана, заголовок должен быть прилеплен к не как обычно
}
else this.thead[0].style.top = 0;
//если таболица уехала высоко. то заголовок должен висеть вверху экрана
if ( window.pageYOffset + this.h_height > this.table_bottom)
{
this.thead[0].style.top = (this.table_bottom - window.pageYOffset - this.h_height)+'px';
//если низ таблицы уехал вверх, прилепляем заголовок к низу таблицы
}
this.thead[0].style.left = (this.table_left - window.pageXOffset)+'px';
//заголовок должен следить за положением таблицы по горизонтали
}
this.i2 = 0;
while(typeof (this.ths[i2])!='undefined')
{
this.border_w = Number(getComputedStyle(this.tds[i2]).borderLeftWidth.substring(0,1))
+
Number(getComputedStyle(this.tds[i2]).borderRightWidth.substring(0,1))
;
//this.border_w = Number(this.border_w.substring(0,1));
//alert (this.border_w);
this.ths[i2].style.width = this.tds[i2].clientWidth+this.border_w +'px'; //ширины ячеек thead должны равняться на первые td
this.ths[i2].style.maxWidth = this.tds[i2].clientWidth+this.border_w +'px';
this.i2++;
}
this.i++;
}
}
Ответ от Ёаня Семенов[гуру]
Ответ от 3 ответа[гуру]
Привет! Вот подборка тем с похожими вопросами и ответами на Ваш вопрос: Как узнать ширину первых трех элементов li? на js, не jquery