Изменение width средствами JavaScript

iPlayer · January 2, 2010

Мне нужно было изменить CSS-атрибут объекта с id="elementID" средствами JavaScript, но ничего не происходит

Пробовал:

document.getElementById("elementID").style.width=150;

document.getElementById("elementID").style.width=150px;

document.getElementById("elementID").style.width="150";

document.getElementById("elementID").style.width="150px";

document.getElementById("elementID").style.width=10%;

document.getElementById("elementID").style.width="10%";

Я не могу никак понять, что я делаю не так? Любые атрибуты, где используется Xpx, с помощью JavaScript-а я не могу установить, будь то border-width, height или еще что-нибудь...

PS Я новичок в этом деле, просьба про кривые руки и прочее не писать...

hf3 · January 2, 2010

document.getElementById("elementID").style.width="150px";

Это правильно. Вы ID не напутали? Может событие не происходит… Ошибки вылазят?

psywalker · January 2, 2010

Мне нужно было изменить CSS-атрибут объекта с id="elementID" средствами JavaScript, но ничего не происходит
Пробовал:
document.getElementById("elementID").style.width=150;
document.getElementById("elementID").style.width=150px;
document.getElementById("elementID").style.width="150";
document.getElementById("elementID").style.width="150px";
document.getElementById("elementID").style.width=10%;
document.getElementById("elementID").style.width="10%";
Я не могу никак понять, что я делаю не так? Любые атрибуты, где используется Xpx, с помощью JavaScript-а я не могу установить, будь то border-width, height или еще что-нибудь...
PS Я новичок в этом деле, просьба про кривые руки и прочее не писать...

Всё правильно, ничего и не получиться.

1) Во первых тебе нужно создать переменные, которым ты присвоишь нужные ID

2) Далее этим переменным ты уже можешь прописать стили.

3) Только нюанс: Если хочешь написать border-width, то придётся делать так:

style.borderWidth, потому что по правилам все новые слова, которые должны или не должны писаться через дефис, должны писаться с большой буквы и всё в одно слово

А вот тебе пример

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
form { margin-bottom: 30px;}
input { display: block; margin: 20px 0;}
div { opacity: .5;}
</style>

</head>

<body>
		<ol onclick="test()">
			<li>
				Лось - животное хитрое
			</li>
			<li>
				.. И коварное
			</li>
			<li>
				Лось - животное хитрое
			</li>
			<li>
				.. И коварное
			</li>
			<li>
				Лось - животное хитрое
			</li>
			<li>
				.. И коварное
			</li>
		</ol>
		<ul id="list2">
<li>Первый элемент</li>
</ul>
<input type="button" value="Alert" onclick="test()" />

<script language="javascript">
function test(){
	var ol = document.getElementsByTagName('ol')[0]
	var li = document.getElementsByTagName('li')[2]

	var newListElem = document.createElement('LI')
	ol.insertBefore(newListElem,li)
	li.innerHTML = 'Новый элемент списка'

	type.style.width = '300px'
	type.style.height = '300px'
	type.style.background = 'red'
	li.style.border = '2px'
	li.style.borderColor = '#000'
	li.style.borderStyle = 'solid'

}

</script>


</body>
</html>

iPlayer · January 2, 2010

Это правильно. Вы ID не напутали? Может событие не происходит… Ошибки вылазят?

Спасибо.. Действительно, с событием проблемы были.

Спасибо большое, что про событие напомнили

1) Во первых тебе нужно создать переменные, которым ты присвоишь нужные ID

зачем объявлять переменные?

Ведь можно же целые конструкции строить, типа

document.getElementById('mydiv').getElementsByTagName('span')[2].getElementsByTagName('a')[0].style.color="#000000";

Edited January 2, 2010 by iPlayer

psywalker · January 2, 2010

Спасибо.. Действительно, с событием проблемы были.
Спасибо большое, что про событие напомнили
зачем объявлять переменные?
Ведь можно же целые конструкции строить, типа
document.getElementById('mydiv').getElementsByTagName('span')[2].getElementsByTagName('a')[0].style.color="#000000";

можно, но просто переменные - это удобно, потом ведь с ними можно работать отдельно

s0rr0w · January 2, 2010

можно, но просто переменные - это удобно, потом ведь с ними можно работать отдельно

Кроме того, что это удобно, это еще и быстрее.

hf3 · January 3, 2010

А почему быстрее?

s0rr0w · January 3, 2010

А почему быстрее?

Потому что каждое обращение к свойствам у объекта - куча лишних действий внутри самого интерпретатора.

Простейший бенчмарк


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
 <title>Bench</title>
</head>
<body>

    <script type="text/javascript">
    	var st = new Date();

    		var bodyNode = document.getElementsByTagName("BODY").item(0);
    		bodyNode.style.backgroundColor = "#ccc";
    		var bgc;

    		for ( var i=100000; i-- >0; ) {
    			bgc = bodyNode.style.backgroundColor;
    		}
    	var et = new Date();

    	alert( et - st );

    	var st = new Date();

    		var bodyNode = document.getElementsByTagName("BODY").item(0);
    		bodyNode.style.backgroundColor = "#ccc";
    		var bgc, cbgc;

    		cbgc = bodyNode.style.backgroundColor;

    		for ( var i=100000; i-- >0; ) {
    			bgc = cbgc;
    		}
    	var et = new Date();

    	alert( et - st );
    </script>

</body>
</html>

Результаты вам понравятся.

shvv · January 3, 2010

Потому что каждое обращение к свойствам у объекта - куча лишних действий внутри самого интерпретатора.
Простейший бенчмарк
Результаты вам понравятся.

Получается в 12 раз быстрее.

А по логике: дополнительные переменные - больше операций?

s0rr0w · January 3, 2010

А по логике: дополнительные переменные - больше операций?

Что за логика? Вы про что?

shvv · January 3, 2010

Что за логика? Вы про что?

Это я просто удивился.

Просто JS только в стадии изучения. Но казалось, зачем создавать новые переменные (будет тратиться время на их обработку), если DOM уже существует.

Ценная информация.

psywalker · January 3, 2010

Это я просто удивился.
Просто JS только в стадии изучения. Но казалось, зачем создавать новые переменные (будет тратиться время на их обработку), если DOM уже существует.
Ценная информация.

Зачем задавать? А тебе удобнее оперировать одной буквой или верёвками кода?

shvv · January 3, 2010

Зачем задавать? А тебе удобнее оперировать одной буквой или верёвками кода?

В отношении удобства согласен. Интересно, что значительный выигрыш в скорости.

psywalker · January 3, 2010

В отношении удобства согласен. Интересно, что значительный выигрыш в скорости.

А удобство - это тоже скорость, и чем удобнее, тем быстрее. Писать одну букву вместо верёвки всегда быстрее.

s0rr0w · January 3, 2010

В отношении удобства согласен. Интересно, что значительный выигрыш в скорости.

Ничего удивительного.

Вам предлагают встать, выйти из комнаты, зайти в нее, подойти к шкафчику, открыть его, достать пенал, открыть его, достать ручку и начать ей писать.

Или же положить на стол ее и иметь быстрый доступ к ней.

shvv · January 3, 2010

Ничего удивительного.
Вам предлагают встать, выйти из комнаты, зайти в нее, подойти к шкафчику, открыть его, достать пенал, открыть его, достать ручку и начать ей писать.
Или же положить на стол ее и иметь быстрый доступ к ней.

Понятная аналогия.

Sign In

Изменение width средствами JavaScript

Question

Link to comment

Share on other sites

15 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information