Форум

MC-XOBAHCK · #1 (**permalink**) 01.09.2017, 12:18

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

Код:

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

Возможно ли вместо значения 150 вставить переменную из JavaScript?

Nexus · #2 (**permalink**) 01.09.2017, 12:34

MC-XOBAHCK, можно скриптом на странице переопределить это свойство.

MC-XOBAHCK · #3 (**permalink**) 01.09.2017, 12:49

Спасибо за ответ. Про возможность переопределить я знаю - поиск даёт по такому ответ.

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

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

Я бы хотел скриптом изменять именно цифры (150 и 130), чтобы они изменялись согласно значениям двух переменных из JavaScripta.

j0hnik · #4 (**permalink**) 01.09.2017, 12:52

MC-XOBAHCK,
все можно

var x = 80;
var y = 90;
document.querySelector('.test').style.borderBottomWidth = x+'px';
document.querySelector('.test').style.borderLeftWidth = y+'px';

ksa · #5 (**permalink**) 01.09.2017, 13:17

j0hnik, он хочет менять именно в теге

<style>...</style>

Менять свойства ему видать вера не позволяет...

j0hnik · #6 (**permalink**) 01.09.2017, 13:25

Сообщение от ksa

j0hnik, он хочет менять именно в теге

<style>...</style>

Менять свойства ему видать вера не позволяет...

Это можно, получаем html всего тега стайл, реплейсаем регуляркой в теге .test все цифры после border-botom и left на нужные, и перезаписываем заново весь тег стайл (довольно таки ресурсоемко получится)

ksa · #7 (**permalink**) 01.09.2017, 13:29

Сообщение от j0hnik

довольно таки ресурсоемко получится

Проще взять и добавить еще один тег

<style>...</style>

С нужным текстом, а каскадность сама сделает свое дело.

Nexus · #8 (**permalink**) 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 · #9 (**permalink**) 01.09.2017, 13:36

Сообщение от ksa

Проще взять и добавить еще один тег

<style>...</style>

С нужным текстом, а каскадность сама сделает свое дело.

Вариант =)

Rasy · #10 (**permalink**) 01.09.2017, 14:12

Сообщение от MC-XOBAHCK

Подскажите пожалуйста, возможно ли при помощи 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>

Форум

Справочник

Discord чат

Курсы javascript