Это не работает:
Вопрос:

Чтение значения CSS с использованием JavaScript

2210 просмотра

7 ответа

1347 Репутация автора

Это работает:

<div id="hello" style="width:100%;"></div>
<script>
window.onload = function(){

alert(document.getElementById("hello").style.width);

};
</script>

Это не работает:

<div id="hello"></div>
<style>
div#hello{
  width:100%;
}
</style>
<script>
window.onload = function(){

alert(document.getElementById("hello").style.width);

};
</script>
  • Я также попытался правильно поместить определение стиля CSS в теге head, не сработало
  • Я попытался определить функцию javascript вместо вызова на window.onload, не работает

Самое странное, если я установлю ширину с помощью JavaScript:

alert( document.getElementById("hello").style.width );
document.getElementById("hello").style.width = "25%";
alert(document.getElementById("hello").style.width );

Это будет работать. Первое оповещение будет отображать пустое оповещение, затем второе оповещение будет отображать «25%»

Автор: Gapton Источник Размещён: 06.03.2012 03:27

Ответы (7)


1 плюс

334952 Репутация автора

В InternetExplorer вы можете использовать .currentStyleвместо .style. В других браузерах вы можете использовать getComputedStyleмеханизм.

var yourElement = document.getElementById('whatever');
var theStyle = window.getComputedStyle(yourElement);

Затем вы можете вызвать .getPropertyValue()возвращенный объект стиля, чтобы найти интересующие вас свойства CSS.

Автор: Pointy Размещён: 06.03.2012 03:30

0 плюса

3823 Репутация автора

Попробуйте поставить свой CSS в разделе заголовка страницы.

Автор: ihorko Размещён: 06.03.2012 03:30

0 плюса

4606 Репутация автора

Я не думаю, что style.width присваивается значение, если вы явно не определите его. Как уже говорили другие, вы можете использовать currentStyle / getComputedStyle, чтобы получить фактические значения элементов CSS.

Если вам нужна ПРОСТО ширина, вы можете перейти с element.offsetWidth. Если вам нужно значение в процентах, вам нужно сравнить элементы offsetWidth с родительским offsetWidth.

Автор: Snuffleupagus Размещён: 06.03.2012 03:31

1 плюс

0 Репутация автора

Решение

Вы не можете получить доступ к свойствам CSS таким способом, который не был установлен с помощью Javascript. Вам нужно использовать getComputedStyle, см. Https://developer.mozilla.org/en/DOM/window.getComputedStyle В MSIE это работает по-другому.

Автор: user1252065 Размещён: 06.03.2012 03:32

0 плюса

687 Репутация автора

JQuery сделает это за вас

$('#hello').mouseover(function({
  alert($(this).width()); 
});

Просто попробуйте!

Автор: Jannis M Размещён: 06.03.2012 03:33

0 плюса

1818 Репутация автора

Вы против использования jQuery?

http://api.jquery.com/width/

$(document).ready(function(){
    alert($("#hello").width());
});
Автор: tedski Размещён: 06.03.2012 03:33

2 плюса

8189 Репутация автора

Попробуйте следующее

window.onload = function(){

var x = document.getElementById("hello");
var y ="";
if (x.currentStyle)
    y = x.currentStyle['width'];
else if (window.getComputedStyle)
    y = document.defaultView.getComputedStyle(x,null).getPropertyValue('width');
alert(y);



};

Это было вдохновлено чем-то, что я прочитал здесь

Автор: Clyde Lobo Размещён: 06.03.2012 03:40
Вопросы из категории :
32x32