Как я могу загрузить атрибуты класса CSS в таблице стилей непосредственно в хеш, используя JavaScript или jQuery? - PullRequest
Новая
       3

Как я могу загрузить атрибуты класса CSS в таблице стилей непосредственно в хеш, используя JavaScript или jQuery?

1 голос
/ 01 октября 2010

Я хочу загрузить пары ключ-значение из класса или идентификатора в таблице стилей CSS в объект JavaScript для доступа к данным.

Обратите внимание, что я НЕ хочу добавлять этот класс к элементу DOM (по крайней мере, не напрямую)

Единственный способ увидеть в JQuery - создать фиктивный скрытый элемент, добавить в него свой класс, используя 

$(“#dummy").addClass(“myclass”);

, а затем запросить, используя 

$(“#dummy”).(cssproperty);

Но даже там я хочу увидеть каждое свойство css, не зная, что они заранее.

Что мне действительно нужно, так это нечто простое, которое загружает класс CSS в хеш. Я не вижу этого в jQuery ... есть ли что-то в обычном JavaScript?

спасибо --Rob

Ответы [ 2 ]

0 голосов
/ 02 октября 2010

TJ Crowder дал мне ответ на этот вопрос.Вот код, который реализует то, что я искал:

Шаг 1: получите таблицу стилей и конкретное правило, которое меня интересует: 

var stylesheets = document.styleSheets;
var rule = document.styleSheets[0].cssRules[0];

Шаг 2: Доступ к этомуконкретное правило по-разному 

rule.style.cssText  // return the full text of that CSS rule
rule.selectorText   // return the selector for that rule e.g. .myclass

Цикл по отдельным стилям: 

var styleObj = rule.style;

for (var i = 0; i < styleObj.length; i++) {
  var key = styleObj[i];             // key is the CSS property e.g. 'color'
  var val = styleObj[key.toCamel()]  // val is the CSS value e.g. 'red'
}

Обратите внимание, что вам нужно преобразовать свойство CSS в CamelCase для тех, у кого есть дефисы.Например, 'font-family' должен быть преобразован в 'fontFamily'

. По какой-то причине JavaScript и jQuery не имеют функций для этого (у Prototype), поэтому вы должны прикрепить эти расширения к классу String где-то всценарий 

String.prototype.toCamel = function(){
return this.replace(/(\-[a-z])/g, function($1){return $1.toUpperCase().replace('-','');});
};
String.prototype.toDash = function(){
return this.replace(/([A-Z])/g, function($1){return "-"+$1.toLowerCase();});
};

Я получил это из блог Джеймса Робертса

0 голосов
/ 01 октября 2010

Два варианта для вас:

1) Объект Stylesheet

... обсуждается здесь и здесь .Это дает вам прямой доступ к определению класса, из которого вы можете непосредственно прочитать свойства стиля и применить их к вашему элементу DOM.

К сожалению, сейчас у меня нет времени разбирать пример, носсылки выше имеют их.По сути, вы перебираете таблицы стилей (document.styleSheets) и для каждой таблицы стилей перебираете cssRules (rules в некоторых браузерах).Каждое правило имеет selectorText, указывающее, как выглядит его селектор (".foo" или что-то еще).Когда вы найдете правило с селектором, соответствующим вашему классу, вы можете просмотреть все свойства его свойства style, используя for (name in rule.style), со значением rule.style[name] внутри цикла.

2) getComputedStyle:

Сделайте, как вы сказали, и примените класс к внешнему элементу, затем используйте функцию getComputedStyle ( MDC , MSDN ), чтобы получитьstyle объект для его вычисленного стиля.Однако будьте осторожны, поскольку вычисляемый стиль может иметь элементы, которые наследуются (например, от стилей, примененных ко всем дочерним элементам body или даже html).

...