Вход

Просмотр полной версии : Управление размеров в стилях через JavaScript

MC-XOBAHCK
01.09.2017, 12:18
Здравствуйте!
Подскажите пожалуйста, возможно ли при помощи JavaScript управлять значением в CSS ?
Например у меня стиль:

.test {
border-bottom: 150px solid black;
}

Возможно ли вместо значения 150 вставить переменную из JavaScript?
Nexus
01.09.2017, 12:34
MC-XOBAHCK, можно скриптом на странице переопределить это свойство.
MC-XOBAHCK
01.09.2017, 12:49
Спасибо за ответ. Про возможность переопределить я знаю - поиск даёт по такому ответ.

У меня полностью стиль выглядит так:

.test {
width:0;
height:0;
border-bottom: 150px solid black;
border-left: 130px solid transparent;
}

Я бы хотел скриптом изменять именно цифры (150 и 130), чтобы они изменялись согласно значениям двух переменных из JavaScripta.
j0hnik
01.09.2017, 12:52
MC-XOBAHCK,
все можно
var x = 80;
var y = 90;
document.querySelector('.test').style.borderBottom Width = x+'px';
document.querySelector('.test').style.borderLeftWi dth = y+'px';
ksa
01.09.2017, 13:17
j0hnik, он хочет менять именно в теге
<style>...</style>
Менять свойства ему видать вера не позволяет... :)
j0hnik
01.09.2017, 13:25
j0hnik, он хочет менять именно в теге
<style>...</style>
Менять свойства ему видать вера не позволяет... :)

Это можно, получаем html всего тега стайл, реплейсаем регуляркой в теге .test все цифры после border-botom и left на нужные, и перезаписываем заново весь тег стайл (довольно таки ресурсоемко получится)
ksa
01.09.2017, 13:29
довольно таки ресурсоемко получится
Проще взять и добавить еще один тег
<style>...</style>
С нужным текстом, а каскадность сама сделает свое дело. ;)
Nexus
01.09.2017, 13:34
Если 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);
Не тестил.
j0hnik
01.09.2017, 13:36
Проще взять и добавить еще один тег
<style>...</style>
С нужным текстом, а каскадность сама сделает свое дело. ;)
Вариант =)
Rasy
01.09.2017, 14:12
Подскажите пожалуйста, возможно ли при помощи JavaScript управлять значением в CSS ?
Можно. Для этого нужно правильно добраться до прототипа стилей.


<!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>
MC-XOBAHCK
01.09.2017, 14:16
Спасибо всем за участие!
Большие СПАСИБО j0hnik, Вы мне помогли в который раз убедиться что у меня кривые руки.
Всё работает с первым вариантом, но я столкнулся с ошибкой, которую не мог понять и найти. Пока на форуме тему не создал, а затем в чистом файле не убедился что работает - был мой код под ошибкой.

Короче нужно мне было это прописывать внутри:
$('document').ready(function(){
а я умудрился вне этой функции писать, поэтому у меня не работало и выдавало ошибку в консоле.

Я свой вариант на jQuery затёр и забыл, но это тоже работает как надо:

document.querySelector('.test').style.borderBottom Width = x+'px';
document.querySelector('.test').style.borderLeftWi dth = y+'px';
Rasy
01.09.2017, 14:26
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'
});
Rasy
01.09.2017, 14:29
Я свой вариант на jQuery затёр и забыл
На jquery еще проще, есть специальный метод.

$('.test').css('border-bottom-width', x+'px');
Nexus
01.09.2017, 14:32
Rasy, а так не проще?
$('.test').css({'border-bottom-width':'600px','border-left-width':'500px'});

Upd. Не видел поста №13.
j0hnik
01.09.2017, 14:52
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'
});


:write: пригодится
Rasy
01.09.2017, 15:10
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'
});
j0hnik
01.09.2017, 15:16
Rasy,
Спасибо =)