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

95
20 марта 2021, 09:50
#beavershadow1321232 {
  --border-size: 2px;
}

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

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

SVG + JS

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

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

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

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

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


<svg  id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg"  
    xmlns:xlink="http://www.w3.org/1999/xlink" 
     
     width="100" height="100" viewBox="0 0 100 100" >   
<rect x="10" y="0" rx="15" width="85" height="100" fill="gold" /> 
  
<g id="gr1">  
<ellipse cx="35" cy="35" ry="10" rx="12" fill="black" > 
 </ellipse> 
<ellipse cx="70" cy="35" ry="10" rx="12" fill="black" > 
    <animate 
	 attributeName="ry" 
	 dur="1s" 
	 begin="svg1.click" 
	 keyTimes=" 0;0.25;0.5;0.75;1" 
	 values="10;0;5;0;10" 
	 repeatCount="1" />  
</ellipse> 
</g> 
  
<circle cx="52.5" cy="50" r="30" fill="none" stroke="black" stroke-dashoffset="-6" stroke-dasharray="80 108.49" /> 
</svg>

  1. Пример оживления картинки *.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;
<div class="wrap"> 
<button type="button" id="btn1"> Бобёр моргай </button> 
 
</div> 
<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg"  
    xmlns:xlink="http://www.w3.org/1999/xlink" 
       width="800" height="800" viewBox="0 0 800 800" preserveAspectRatio="xMinYMin meet">   
 
<image xlink:href="https://i.stack.imgur.com/kPh1N.jpg" width="100%" height="100%" /> 
 <path  d="m308 173c-9 5 3-20 10-28 6-6 15-11 23-10 11 0 22 6 29 14 7 8 16 37 7 31-16-10-22-14-34-16-12-1-20 0-34 8z" id="path12"> 
  <animate id="an_eye" 
    attributeName="d" 
	dur="0.8s" 
	begin="indefinite" 
	values=" 
	 m308 173c-9 5 3-20 10-28 6-6 15-11 23-10 11 0 22 6 29 14 7 8 16 37 7 31-16-10-22-14-34-16-12-1-20 0-34 8z; 
	 m308 173c-4-9 3-20 10-28 6-6 15-11 23-10 11 0 22 6 29 14 7 8 13 22 7 31-9 14-21 25-34 24-15-1-25-9-34-31z; 
	 m308 173c-9 5 3-20 10-28 6-6 15-11 23-10 11 0 22 6 29 14 7 8 16 37 7 31-16-10-22-14-34-16-12-1-20 0-34 8z" 
	 repeatCount="2" /> 
 </path> 
</svg>

Answer 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) 
}
<div class='beaver__eye'></div>

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

Answer 3

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

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

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

       function changeStyleDiv(){
          document.getElementById('targetDiv').style.border = '20px solid red';
       }
READ ALSO
Фильтровать select
HTML

Фильтровать select

Есть два select элемента первый это марка авто, второе это модель авто

 154
Вставить данные с процедуры в таблицу в MySQL
MySQL

Вставить данные с процедуры в таблицу в MySQL

Коллеги, кто-то проходил квест по написанию синтаксиса INSERT #Temp EXEC dboTest_Proc @a = @a в MySQL? Это вообще возможно без предварительного создания таблицы...

 121
Нужна помощь с SQL запросом на сортировку
MySQL

Нужна помощь с SQL запросом на сортировку

Товарищи! ВыручайтеЗатуп какой то словил: Написать запрос, возвращающий на каждого пользователя (member_id) по три самых дорогих (order_amount) заказа...

 113
Как определить, что грузит MySQL?
MySQL

Как определить, что грузит MySQL?

 118