Форум

Abelx · #1 (**permalink**) 09.03.2013, 21:23

Привет всем.

Нужно получить значение свойства CSS находящийся в теге <style> с помощью Javascript.

Код:

<html>
<head>
</head>
<body>
<p id="text" style="display:block;">My text</p>

<script type="text/javascript">
var myText = document.getElementById("text");
alert(myText.style.display);
</script>


</body>
</html>

Когда свойство написано в атрибуте "style" то значение выдаёт, а когда в теге <style> то нечего не показывает.

Код:

<html>
<head>
<style type="text/css">
#text{
	display:block;
	}
</style>
</head>
<body>
<p id="text">My text</p>

<script type="text/javascript">
var myText = document.getElementById("text");
alert(myText.style.display);
</script>


</body>
</html>

Подскажите причину и как решить проблему пожалуйста.
Спасибо.

Deff · #2 (**permalink**) 09.03.2013, 21:33

Cвойство нун парсить, а строку можно получить и поменять, либо тестить через getComputedStyle http://learn.javascript.ru/styles-and-classes

<style id="a1">
#bigpick {
text-align:center;
opacity:1;
filter: alpha(opacity=1);
-webkit-transition:1s;
-moz-transition:1s;
-ms-transition:1s;
-o-transition:1s;
transition:1s;
}
</style>

<script type="text/javascript">
  var v=document.getElementById('a1')
  var str=v.innerHTML;
  alert("тестим в теге opacity:\n"+str.split(/(opacity:\S)/)[1])
</script>

danik.js · #3 (**permalink**) 09.03.2013, 21:46

Сообщение от Deff

Cвойство нун парсить

Ну тут все проще.

var styles = document.getElementsByTagName('style'); // все стили
var sheet = styles[0].sheet; // первая таблица стилей
var rules = sheet.rules; // правила первой таблицы
var style = rules[0].style // набор свойств первого правила первой таблицы
var property = style[0]; // первое свойство первого правила первой таблицы
var value = style[property]; // его значение

В старых IE что-то подобное тоже есть.

Abelx · #4 (**permalink**) 09.03.2013, 22:11

А если будет вот так?

<style id="a1">
#text0 {
opacity:1;
}

#text1 {
opacity:1;
}

#text3 {
opacity:1;
}

И мне надо будет только значение свойства "opacity" в #text3 ?

Abelx · #5 (**permalink**) 09.03.2013, 22:16

Cвойство нун парсить, а строку можно получить и поменять, либо тестить через getComputedStyle http://learn.javascript.ru/styles-and-classes

Я прочитал эту статью но не работает. В firefox-e нечего не показывает а в других не то показывает.

Deff · #6 (**permalink**) 09.03.2013, 22:48

Сообщение от danik.js

Ну тут все проще.

Чот у меня не вышло

<style  id="style">
#text0 {
opacity:0.1;
}

#text1 {
opacity:0.2;
}

#text3 {
opacity:0.3;
}
</style>

<script type="text/javascript">
var styles = document.getElementsByTagName('style'); // все стили
var sheet = styles[0].sheet; // первая таблица стилей
var rules = sheet.rules; // правила первой таблицы
//var style = rules[0].style // набор свойств первого правила первой таблицы

alert(styles.length)
alert(sheet)
alert(rules)
</script>

Deff · #7 (**permalink**) 09.03.2013, 23:17

<style id="a1">
#text0 {
opacity:0.1;
}

#text1 {
opacity:0.2;
}

#text3 {
opacity:0.3;
}
</style>
</style>

<script type="text/javascript">
  var v=document.getElementById('a1')
  var str=v.innerHTML;
  var t3=str.replace(/[\s\S]*?#text3 \{([\s\S]*?)\}[\s\S]*$/gim,'$1')
  alert(t3)
</script>

Abelx · #8 (**permalink**) 10.03.2013, 00:21

Я так понял что в javascipt нету такой функции, нужно делать такими способами

danik.js · #9 (**permalink**) 10.03.2013, 05:56

Сообщение от Abelx

Я так понял что в javascipt нету такой функции, нужно делать такими способами

Все правильно понял. Вот тому подтверждение:

<style>
    #text0 {
    opacity:0.1;
    }
     
    #text1 {
    opacity:0.2;
    }
     
    #text3 {
    opacity:0.3;
    }
</style>
 
<script>
    function cssValue(style, selector, property) {
        var rules = style.sheet.cssRules;
        for (var i = 0; i < rules.length; i++) {
            if (rules[i].selectorText == selector) {
                return rules[i].style[property];
            }
        }
        return null;
    }
    var styles = document.getElementsByTagName('style');
    var opacity = cssValue(styles[0], '#text3', 'opacity');
    alert(opacity);
</script>

Abelx · #10 (**permalink**) 10.03.2013, 13:15

Ок спасибо

Форум

Справочник

Discord чат

Курсы javascript