--border-size: как поменять такой элемент(css переменную) из js?

#javascript #html #css #svg #svg_animation

#beavershadow1321232 {
  --border-size: 2px;

}


так не работает

 document.getElementById("beavershadow1321232").style.--border-size = "20px";

    

Ответы

Ответ 1

SVG + JS

Из вопроса и ответов я понял, что главная задача - сделать анимацию изменения контуров
объекта. 


Пример анимированного смайла, где происходит моргание левым глазом после клика. 




Для анимирования используется изменение радиуса эллипса ry   

Неравномерность моргания обеспечивают атрибуты:

 keyTimes=" 0;0.25;0.5;0.75;1"
     values="10;0;5;0;10"




     





Пример оживления картинки *.jpg c применением анимации атрибута d path 
(моргание глазом)


Техника реализации в этом примере немного сложнее, поэтому приведу некоторые объяснения: 


Выбираем любую понравившуюся картинку:  




Допустим нужно изобразить моргание левого глаза после клика по картинке 


Загружаем в векторный редактор изображение бобра и инструментом рисовать
кривые Безье наносим узловые точки исходного положения века  


  


Сохраняем файл в формате *.svg и копируем  path исходного состояния
века  
перетаскиваем нижние узловые точки в положение закрытого века и
рычагами управления узловых точек (красные стрелки) придаем нужную форму кривой  


 


снова сохраняем файл и копируем патч закрытого века 


Анимация закрывания века

Соль анимации заключается в изменении path открытого века на path закрытого века
и обратно к открытому веку.
Значения патчей записываются в атрибут values через точку с запятой.   

Главное условие плавности анимации,  без рывков, это - одинаковое количество узловых
точек во всех патчах. Это достигается техникой, которая описана выше.   



var btn = document.getElementById('btn1');
var an_eye = document.getElementById('an_eye');
btn.onclick = function () {
an_eye.beginElement();
}
path {
fill:#7A3609;
stroke:#000;
stroke-width:4;







Ответ 2

document.body.addEventListener('click', () => {
  document.querySelector(".beaver__eye").style.setProperty('--beav-border', 20 + 'px')
})
html {
  --beav-border: 5px;
}

.beaver__eye {
  width: 50px;
  height: 50px;
  background-color: red;
  color: red;
  border-radius: var(--beav-border)
}





Не встречал свойства border-size, поэтому показал на примере border-radius. Кликните
по красному блоку, чтобы применить действие.


Ответ 3

На вашем месте я бы воспользовался библиотекой jQuery,так было бы проще все реализовать

Если же вы хотите сделать это исключительно через JS могу посоветовать несколько
вариантов

Используя css,а после получить его через toggle(className) 
Или же

       function changeStyleDiv(){
          document.getElementById('targetDiv').style.border = '20px solid red';
       }