Изменение CSS значения с JavaScript
Я просто улучшил динамическую сортировку Ege Özcan для погружения глубоко внутри объектов. Если Data выглядит так:
obj = [
{
a: { a: 1, b: 2, c: 3 },
b: { a: 4, b: 5, c: 6 }
},
{
a: { a: 3, b: 2, c: 1 },
b: { a: 6, b: 5, c: 4 }
}];
, и если вы хотите отсортировать его по свойствам a.a, я думаю, что мое улучшение помогает очень хорошо. Я добавляю новую функциональность к таким объектам:
Object.defineProperty(Object.prototype, 'deepVal', {
enumerable: false,
writable: true,
value: function (propertyChain) {
var levels = propertyChain.split('.');
parent = this;
for (var i = 0; i < levels.length; i++) {
if (!parent[levels[i]])
return undefined;
parent = parent[levels[i]];
}
return parent;
}
});
и изменил функцию return_dynamicSort :
return function (a,b) {
var result = ((a.deepVal(property) > b.deepVal(property)) - (a.deepVal(property) < b.deepVal(property)));
return result * sortOrder;
}
И теперь вы можете сортировать по a.a. следующим образом:
obj.sortBy('a.a');
См. Commplete script in JSFiddle
3 ответа
Хорошо, это кажется, что Вы хотите изменить глобальный CSS поэтому, который будет effictively изменить все элементы стиля peticular сразу. Я недавно изучил, как сделать это сам от учебное руководство Shawn Olson. Можно непосредственно сослаться на его код здесь .
Вот сводка:
можно получить эти таблицы стилей через document.styleSheets. Это на самом деле возвратит массив всех таблиц стилей на Вашей странице, но можно сказать, какой Вы идете через document.styleSheets[styleIndex].href свойство. После того как Вы нашли таблицу стилей, которую Вы хотите отредактировать, необходимо получить массив правил. Это называют "правилами" в IE и "cssRules" в большинстве других браузеров. Способ сказать, что CSSRule Вы идете, selectorText свойство. Рабочий код выглядит примерно так:
var cssRuleCode = document.all ? 'rules' : 'cssRules'; //account for IE and FF
var rule = document.styleSheets[styleIndex][cssRuleCode][ruleIndex];
var selector = rule.selectorText; //maybe '#tId'
var value = rule.value; //both selectorText and value are settable.
Сообщенный мне, как это работает на Вас и комментирует, видите ли Вы какие-либо ошибки.
Можно получить "вычисленные" стили любого элемента.
IE использует что-то позвонившее "currentStyle", Firefox (и я принимаю другие "стандартные совместимые" браузеры), использует "defaultView.getComputedStyle".
необходимо будет записать перекрестную функцию браузера, чтобы сделать это или использовать хорошую платформу JavaScript как прототип или jQuery (поиск "getStyle" в прототипе файл JavaScript и "curCss" в файле JavaScript jQuery).
, Который сказал, нужны ли Вам высота или ширина, необходимо, вероятно, использовать element.offsetHeight и element.offsetWidth.
возвращенное значение является Нулевым, поэтому если у меня есть JavaScript, который должен знать, что ширина чего-то делает некоторую логику (я увеличиваю ширину на 1%, не к определенному значению)
Мышление, если Вы добавляете встроенный стиль к рассматриваемому элементу, это может действовать как значение "по умолчанию" и будет читаемо JavaScript на загрузке страницы, так как это - свойство встроенного стиля элемента:
<div style="width:50%">....</div>
Я никогда не видел практического применения этого, но необходимо, вероятно, рассмотреть таблицы стилей DOM . Однако я честно думаю, что это - излишество.
, Если Вы просто хотите получить ширину и высоту элемента, независимо от того, где размеры применяются от, просто используйте element.offsetWidth и element.offsetHeight.