Управление размеров в стилях через 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>
|
| Часовой пояс GMT +3, время: 04:47. |