Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.03.2013, 21:23
Новичок на форуме
Отправить личное сообщение для Abelx Посмотреть профиль Найти все сообщения от Abelx
 
Регистрация: 09.10.2012
Сообщений: 5

получить значение свойства 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>
Подскажите причину и как решить проблему пожалуйста.
Спасибо.

Последний раз редактировалось Abelx, 09.03.2013 в 21:39.
Ответить с цитированием
  #2 (permalink)  
Старый 09.03.2013, 21:33
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

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>
Ответить с цитированием
  #3 (permalink)  
Старый 09.03.2013, 21:46
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Сообщение от 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 что-то подобное тоже есть.
Ответить с цитированием
  #4 (permalink)  
Старый 09.03.2013, 22:11
Новичок на форуме
Отправить личное сообщение для Abelx Посмотреть профиль Найти все сообщения от Abelx
 
Регистрация: 09.10.2012
Сообщений: 5

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

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

#text1 {
opacity:1;
}

#text3 {
opacity:1;
}

И мне надо будет только значение свойства "opacity" в #text3 ?
Ответить с цитированием
  #5 (permalink)  
Старый 09.03.2013, 22:16
Новичок на форуме
Отправить личное сообщение для Abelx Посмотреть профиль Найти все сообщения от Abelx
 
Регистрация: 09.10.2012
Сообщений: 5

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

Я прочитал эту статью но не работает. В firefox-e нечего не показывает а в других не то показывает.
Ответить с цитированием
  #6 (permalink)  
Старый 09.03.2013, 22:48
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Сообщение от 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:18.
Ответить с цитированием
  #7 (permalink)  
Старый 09.03.2013, 23:17
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

<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>
Ответить с цитированием
  #8 (permalink)  
Старый 10.03.2013, 00:21
Новичок на форуме
Отправить личное сообщение для Abelx Посмотреть профиль Найти все сообщения от Abelx
 
Регистрация: 09.10.2012
Сообщений: 5

Я так понял что в javascipt нету такой функции, нужно делать такими способами
Ответить с цитированием
  #9 (permalink)  
Старый 10.03.2013, 05:56
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Сообщение от 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>

Последний раз редактировалось danik.js, 10.03.2013 в 06:08.
Ответить с цитированием
  #10 (permalink)  
Старый 10.03.2013, 13:15
Новичок на форуме
Отправить личное сообщение для Abelx Посмотреть профиль Найти все сообщения от Abelx
 
Регистрация: 09.10.2012
Сообщений: 5

Ок спасибо
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Получить функцию JavaScript (PHP, AJAX, jQuery) Sinot jQuery 3 04.02.2013 13:32
Не могу получить свойство объекта FINoM Общие вопросы Javascript 4 04.12.2011 04:46
Выпадающее меню на css и javascript Jackky Общие вопросы Javascript 3 13.09.2008 18:30
Изменение имиджа по таймеру с помощью CSS и JavaScript Aimless Общие вопросы Javascript 10 15.08.2008 18:09
javascript, css и iexplorer Блондинко Internet Explorer 4 21.02.2008 12:39