Управление размеров в стилях через JavaScript
Здравствуйте!
Подскажите пожалуйста, возможно ли при помощи JavaScript управлять значением в CSS ? Например у меня стиль: Код:
.test { |
MC-XOBAHCK, можно скриптом на странице переопределить это свойство.
|
Спасибо за ответ. Про возможность переопределить я знаю - поиск даёт по такому ответ.
У меня полностью стиль выглядит так:
.test {
width:0;
height:0;
border-bottom: 150px solid black;
border-left: 130px solid transparent;
}
Я бы хотел скриптом изменять именно цифры (150 и 130), чтобы они изменялись согласно значениям двух переменных из JavaScripta. |
MC-XOBAHCK,
все можно
var x = 80;
var y = 90;
document.querySelector('.test').style.borderBottomWidth = x+'px';
document.querySelector('.test').style.borderLeftWidth = y+'px';
|
j0hnik, он хочет менять именно в теге
<style>...</style> Менять свойства ему видать вера не позволяет... :) |
Цитата:
|
Цитата:
<style>...</style> С нужным текстом, а каскадность сама сделает свое дело. ;) |
Если css находится в отдельном файле, а изменения нужно внести сразу ко всем эл-там страницы, то можно сделать так:
var node=document.createElement('style');
newBorderBWidth=100,
newBorderLWidth=200;
node.innerHTML='html .text{'+
'border-bottom-width:'+newBorderBWidth+'px;'+
'border-left-width:'+newBorderLWidth+'px;'+
'}';
document.getElementsByTagName('body')[0].appendChild(node);
Не тестил. |
Цитата:
|
Цитата:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.test {
width:0;
height:0;
border-bottom: 150px solid black;
border-left: 130px solid transparent;
}
</style>
<script>
(function(options) {
var style = document.styleSheets[0].rules[0].style;
for (var prop in options) {
style.setProperty(prop, options[prop]);
}
})({
'border-bottom-width': '400px',
'border-left-width': '500px'
});
</script>
</head>
<body>
<p class="test"></p>
</body>
</html>
|
Спасибо всем за участие!
Большие СПАСИБО j0hnik, Вы мне помогли в который раз убедиться что у меня кривые руки. Всё работает с первым вариантом, но я столкнулся с ошибкой, которую не мог понять и найти. Пока на форуме тему не создал, а затем в чистом файле не убедился что работает - был мой код под ошибкой. Короче нужно мне было это прописывать внутри: $('document').ready(function(){ а я умудрился вне этой функции писать, поэтому у меня не работало и выдавало ошибку в консоле. Я свой вариант на jQuery затёр и забыл, но это тоже работает как надо:
document.querySelector('.test').style.borderBottomWidth = x+'px';
document.querySelector('.test').style.borderLeftWidth = y+'px';
|
MC-XOBAHCK,
Вот набросал лучший, гибкий вариант, если не через атрибуты изменять свойства
(function(selector, options) {
var style = document.styleSheets[0];
var rules = style.rules;
[].some.call(rules, function(rule) {
if (rule.selectorText == selector) {
for (var prop in options) {
rule.style.setProperty(prop, options[prop]);
}
}
});
})('.test', {
'border-bottom-width': '600px',
'border-left-width': '500px'
});
|
Цитата:
$('.test').css('border-bottom-width', x+'px');
|
Rasy, а так не проще?
$('.test').css({'border-bottom-width':'600px','border-left-width':'500px'});
Upd. Не видел поста №13. |
Цитата:
|
j0hnik,
Немного подретушировал для копилки сниппетов хрома:)
(function(selector, options, n) {
n = n || 0;
var style = document.styleSheets[n];
var rules = style.rules;
[].some.call(rules, function(rule) {
if (rule.selectorText == selector) {
for (var prop in options) {
rule.style.setProperty(prop, options[prop]);
}
return;
}
});
})('.test', {
'width': '200px',
'height': '200px'
});
|
Rasy,
Спасибо =) |
| Часовой пояс GMT +3, время: 23:32. |