Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   получить свойство CSS в теге Style с помощью JavaScript (https://javascript.ru/forum/events/36272-poluchit-svojjstvo-css-v-tege-style-s-pomoshhyu-javascript.html)

Abelx 09.03.2013 21:23
получить значение свойства CSS находящийся в теге Style с помощью JavaScript
 
Привет всем.

Нужно получить значение свойства 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 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 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 09.03.2013 22:11
А если будет вот так?

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

#text1 {
opacity:1;
}

#text3 {
opacity:1;
}

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

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

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

Deff 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 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 10.03.2013 00:21
Я так понял что в javascipt нету такой функции, нужно делать такими способами :(

danik.js 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.03.2013 13:15
Ок спасибо ;)


Часовой пояс GMT +3, время: 17:15.