getComputedStyle

Great Rash · June 2, 2009

Вообще юзаю функцию getElementComputedStyle (нагуглить ее не сложно если кому интересно). С помощью этой функции пытаюсь получить значение бордера элемента (а именно ширину). В ИЕ все работает как часы (редкий случай), а вот в мозилле приходит пустота...

Стал разбираться. С сайта developer.mozilla.org (точный адрес страницы: https://developer.mozilla.org/En/DOM:window...tComputedStyle) тупо взял поюзать вот такой код:

<html>
<head>
<style>
	#elem_container{
		position: absolute;
		left: 100px;
		top: 200px;
		height: 100px;
		border: #f00 1px solid;
	}
</style>
</head>

<body>
<div id="elem_container">dummy</div>
<div id="output"></div> 

<script>
	function getTheStyle() {
		var elem=document.getElementById("elem_container");
		var theCSSprop=document.defaultView.getComputedStyle(elem,null).getPropertyValue("border");
		document.getElementById("output").innerHTML=theCSSprop;
	}
	getTheStyle();
</script>

</body>
</html>

Возвращает и правда пустоту.

Как только не пробовал вводить: и border-width, и borderWidth, и border-left нифига не работает...

Если кто сталкивался помогите пожалуйста.

Styx · June 2, 2009

Объект, возвращаемый методом getComputedStyle не абсолютно идентичен объекту style. Атрибуты сокращенного форматирования (типа border, border-style) в нем отсутствуют. Видимо, с этим остается смириться и пользоваться атрибутами для каждой из границ: borderBottomStyle, borderBottomWidth и прочее...

Edited June 2, 2009 by Styx

Great Rash · June 2, 2009

Попробовал в стилях написать border-bottom: #f00 1px solid; и вывести borderBottomStyle - нифига не работает

Nekromancer · June 2, 2009

borderBottomWidth надо получать

а в стилях можешь писать как угодно.

Styx · June 2, 2009

<html>
<head>
<title>getComputedStyle</title>
<style>
	#elem_container{
		position: absolute;
		left: 100px;
		top: 200px;
		height: 100px;
		border: #f00 1px solid;
	}
</style>
</head>

<body>
<div id="elem_container">dummy</div>
<div id="output"></div> 

<script>
	function getTheStyle() {
		var elem = document.getElementById("elem_container");
		var currStyle = (elem.currentStyle) ? elem.currentStyle : getComputedStyle(elem, '');
		var bordr = currStyle.borderBottomWidth + " " + currStyle.borderBottomStyle + " " + currStyle.borderBottomColor;
		elem.innerHTML = bordr;
	}
	getTheStyle();
</script>

</body>
</html>

Edited June 2, 2009 by Styx

Nekromancer · June 2, 2009

http://tigir.com/javascript.htm#getElementComputedStyle

Great Rash · June 2, 2009

Всем спасибо за помощь. А вот чего я нагуглил попутно:

<html>
<head>
<style>
	#elem_container{
		position: absolute;
		left: 100px;
		top: 200px;
		height: 100px;
		border: #f00 1px solid;
	}
</style>
</head>

<body>
<div id="elem_container">dummy</div>
<div id="output"></div>

<script>
	function getTheStyle() {
		var elem=document.getElementById("elem_container");
		var theCSSprop=document.defaultView.getComputedStyle(elem,null).getPropertyValue("border-bottom-width"); // выведет "10px"
		document.getElementById("output").innerHTML=theCSSprop;
	}
	getTheStyle();
</script>

</body>
</html>

Так что не обязвтельно писать а ля javascript стайл.

2Nekromancer:

А эта страничка у меня в закладках. Оттуда я и брал скрипт изначально. Но что-то там туманно написано...

Edited June 2, 2009 by Great Rash

Sign In

getComputedStyle

Question

Great Rash

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

Styx

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

Nekromancer

Link to comment

Share on other sites

Styx

Link to comment

Share on other sites

Nekromancer

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information