Изменение значений CSS с помощью Javascript
легко установить встроенные значения CSS с помощью javascript. Если я хочу изменить ширину и у меня есть HTML-код такой:
<div style="width: 10px"></div>
все, что мне нужно сделать, это:
document.getElementById('id').style.width = value;
это изменит встроенные значения таблицы стилей. Обычно это не проблема, потому что встроенный стиль переопределения стилей. Пример:
<style>
#tId {
width: 50%;
}
</style>
<div id="tId"></div>
используя этот Javascript:
document.getElementById('tId').style.width = "30%";
Я получаю следующее:
<style>
#tId {
width: 50%;
}
</style>
<div id="tId" style="width: 30%";></div>
это проблема, потому что не только я не хочу менять встроенные значения, если я ищу ширину, прежде чем установить ее, когда у меня есть:
<div id="tId"></div>
возвращаемое значение равно Null, поэтому, если у меня есть Javascript, который должен знать ширину чего-то, чтобы сделать некоторую логику (я увеличиваю ширину на 1%, а не до определенного значения), получение Null, когда я ожидаю, что строка "50%" на самом деле не работает.
Итак, мой вопрос: у меня есть значения в стиле CSS, которые не расположены в строке, как я могу получить эти значения? Как изменить стиль вместо встроенных значений, учитывая id?
9 ответов
Ok, похоже, вы хотите изменить глобальный CSS, чтобы эффективно изменить все элементы петикулярного стиля сразу. Я недавно узнал, как это сделать сам от A Шон Олсон учебник. Вы можете напрямую ссылаться на его код здесь.
Итак:
вы можете получить стили via document.styleSheets
. Это фактически вернет массив всех таблиц стилей на Вашей странице, но вы можете сказать какой из них вы находитесь на via 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.
Дайте мне знать, как это работает для вас, и, пожалуйста, прокомментируйте, если вы видите какие-либо ошибки.
пожалуйста! Просто спросите w3 (http://www.quirksmode.org/dom/w3c_css.html)! Вернее, это заняло у меня пять часов... но вот оно!
function css(selector, property, value) {
for (var i=0; i<document.styleSheets.length;i++) {//Loop through all styles
//Try add rule
try { document.styleSheets[i].insertRule(selector+ ' {'+property+':'+value+'}', document.styleSheets[i].cssRules.length);
} catch(err) {try { document.styleSheets[i].addRule(selector, property+':'+value);} catch(err) {}}//IE
}
}
функция очень проста в использовании.. пример:
<div id="box" class="boxes" onclick="css('#box', 'color', 'red')">Click Me!</div>
Or:
<div class="boxes" onmouseover="css('.boxes', 'color', 'green')">Mouseover Me!</div>
Or:
<div class="boxes" onclick="css('body', 'border', '1px solid #3cc')">Click Me!</div>
Ох..
EDIT: как описано в ответе @user21820, может быть немного ненужно менять все таблицы стилей на странице. Следующий скрипт работает с IE5.5, а также последние Google Chrome, и добавляет только выше описанная функция css ().
(function (scope) {
// Create a new stylesheet in the bottom
// of <head>, where the css rules will go
var style = document.createElement('style');
document.head.appendChild(style);
var stylesheet = style.sheet;
scope.css = function (selector, property, value) {
// Append the rule (Major browsers)
try { stylesheet.insertRule(selector+' {'+property+':'+value+'}', stylesheet.cssRules.length);
} catch(err) {try { stylesheet.addRule(selector, property+':'+value); // (pre IE9)
} catch(err) {console.log("Couldn't add style");}} // (alien browsers)
}
})(window);
собирая код в ответах, я написал эту функцию, которая, кажется, хорошо работает на моем FF 25.
function CCSStylesheetRuleStyle(stylesheet, selectorText, style, value){
/* returns the value of the element style of the rule in the stylesheet
* If no value is given, reads the value
* If value is given, the value is changed and returned
* If '' (empty string) is given, erases the value.
* The browser will apply the default one
*
* string stylesheet: part of the .css name to be recognized, e.g. 'default'
* string selectorText: css selector, e.g. '#myId', '.myClass', 'thead td'
* string style: camelCase element style, e.g. 'fontSize'
* string value optionnal : the new value
*/
var CCSstyle = undefined, rules;
for(var m in document.styleSheets){
if(document.styleSheets[m].href.indexOf(stylesheet) != -1){
rules = document.styleSheets[m][document.all ? 'rules' : 'cssRules'];
for(var n in rules){
if(rules[n].selectorText == selectorText){
CCSstyle = rules[n].style;
break;
}
}
break;
}
}
if(value == undefined)
return CCSstyle[style]
else
return CCSstyle[style] = value
}
Это способ поместить значения в css, которые будут использоваться в JS, даже если они не поняты браузером. например, maxHeight для tbody в прокручиваемой таблице.
звоните :
CCSStylesheetRuleStyle('default', "#mydiv", "height");
CCSStylesheetRuleStyle('default', "#mydiv", "color", "#EEE");
Я не знаю, почему другие решения пройти через весь список стилей документа. Это создает новую запись в каждой таблице стилей, что неэффективно. Вместо этого мы можем просто добавить новую таблицу стилей и просто добавить туда нужные правила CSS.
style=document.createElement('style');
document.head.appendChild(style);
stylesheet=style.sheet;
function css(selector,property,value)
{
try{ stylesheet.insertRule(selector+' {'+property+':'+value+'}',stylesheet.cssRules.length); }
catch(err){}
}
обратите внимание, что мы можем переопределить даже встроенные стили, установленные непосредственно на элементах, добавив"!важно" для стоимости имущества, если уже не существует более конкретного"!важные " объявления стиля для это свойство.
У меня недостаточно репутации, чтобы комментировать, поэтому я отформатирую ответ, но это всего лишь демонстрация проблемы.
Кажется, когда стили элементов определены в таблицах стилей, они не видны getElementById ("someElement").стиль
этот код иллюстрирует проблему... код снизу на jsFiddle.
в тесте 2 при первом вызове значение элементов слева не определено, и поэтому то, что должно быть простым переключателем, перепутано. Для моего использования я определю свои важные значения стиля inline, но это, похоже, частично нарушает цель таблицы стилей.
вот код страницы...
<html>
<head>
<style type="text/css">
#test2a{
position: absolute;
left: 0px;
width: 50px;
height: 50px;
background-color: green;
border: 4px solid black;
}
#test2b{
position: absolute;
left: 55px;
width: 50px;
height: 50px;
background-color: yellow;
margin: 4px;
}
</style>
</head>
<body>
<!-- test1 -->
Swap left positions function with styles defined inline.
<a href="javascript:test1();">Test 1</a><br>
<div class="container">
<div id="test1a" style="position: absolute;left: 0px;width: 50px; height: 50px;background-color: green;border: 4px solid black;"></div>
<div id="test1b" style="position: absolute;left: 55px;width: 50px; height: 50px;background-color: yellow;margin: 4px;"></div>
</div>
<script type="text/javascript">
function test1(){
var a = document.getElementById("test1a");
var b = document.getElementById("test1b");
alert(a.style.left + " - " + b.style.left);
a.style.left = (a.style.left == "0px")? "55px" : "0px";
b.style.left = (b.style.left == "0px")? "55px" : "0px";
}
</script>
<!-- end test 1 -->
<!-- test2 -->
<div id="moveDownThePage" style="position: relative;top: 70px;">
Identical function with styles defined in stylesheet.
<a href="javascript:test2();">Test 2</a><br>
<div class="container">
<div id="test2a"></div>
<div id="test2b"></div>
</div>
</div>
<script type="text/javascript">
function test2(){
var a = document.getElementById("test2a");
var b = document.getElementById("test2b");
alert(a.style.left + " - " + b.style.left);
a.style.left = (a.style.left == "0px")? "55px" : "0px";
b.style.left = (b.style.left == "0px")? "55px" : "0px";
}
</script>
<!-- end test 2 -->
</body>
</html>
Я надеюсь, что это поможет осветить проблему.
пропустить
вы можете получить "вычисляемые" стили любого элемента.
IE использует что-то под названием "currentStyle", Firefox (и я предполагаю, что другие "стандартные совместимые" браузеры) использует "defaultView.getComputedStyle".
для этого вам нужно написать функцию кросс-браузера или использовать хорошую структуру Javascript, такую как prototype или jQuery (поиск "getStyle" в файле JavaScript прототипа и "curCss" в файле javascript jQuery).
что сказал, Если вам нужно высота или ширина вы, вероятно, должны использовать element.offsetHeight и элемент.offsetWidth.
возвращаемое значение равно Null, поэтому, если у меня есть Javascript, который должен знать ширину чего-то, чтобы сделать некоторую логику (я увеличиваю ширину на 1%, а не до определенного значения)
ум, если вы добавляете встроенный стиль к рассматриваемому элементу, он может действовать как значение "по умолчанию" и будет читаться Javascript при загрузке страницы, так как это встроенный стиль элемента свойство:
<div style="width:50%">....</div>
это простые 32 строки gist позволяет идентифицировать данную таблицу стилей и очень легко изменять ее стили:
var styleSheet = StyleChanger("my_custom_identifier");
styleSheet.change("darkolivegreen", "blue");
Я никогда не видел практического использования этого, но вы, вероятно, должны рассмотреть таблицы стилей DOM. Однако, честно говоря, я думаю, что это перебор.
Если вы просто хотите получить ширину и высоту элемента, независимо от того, откуда применяются размеры, просто используйте element.offsetWidth
и element.offsetHeight
.
возможно, попробуйте это:
function CCSStylesheetRuleStyle(stylesheet, selectorText, style, value){
var CCSstyle = undefined, rules;
for(var m in document.styleSheets){
if(document.styleSheets[m].href.indexOf(stylesheet) != -1){
rules = document.styleSheets[m][document.all ? 'rules' : 'cssRules'];
for(var n in rules){
if(rules[n].selectorText == selectorText){
CCSstyle = rules[n].style;
break;
}
}
break;
}
}
if(value == undefined)
return CCSstyle[style]
else
return CCSstyle[style] = value
}