Как переопределить свойство класса @keyframes CSS в HTML

Как переопределить свойство CSS класса @keyframes в html

У меня есть класс CSS, используемый для рисования маркера leaflet.js. Используя Javascript и форму бритвенной страницы, пользователь создает внешний вид маркера, при создании которого одним из параметров является цвет, которым будет светиться маркер при установке в режим мигания. Исходя из приведенного ниже кода, до сих пор мне удавалось изменить общую цветовую схему маркера, но я изо всех сил пытаюсь выяснить, как получить доступ к свойству background-color {amp}amp; box-shadow ‘@keyframes glowing’, чтобы Я могу переопределить шестнадцатеричное значение цвета при создании маркера:

Класс CSS:

  .marker-pin { width: 30px; height: 30px; border-radius: 50% 50% 50% 0; background: #c30b82; position: absolute; transform: rotate(-45deg); left: 50%; top: 50%; margin: -15px 0 0 -15px; animation: glowing 1000ms infinite; } /* to draw white circle */ .marker-pin::after { content: ''; width: var(--width, 24px); height: var(--height, 24px); margin: var(--margin, 3px 0 0 3px); background: var(--color, white); position: absolute; border-radius: 50%; } /* to align icon */ .custom-div-icon i { position: absolute; width: 22px; font-size: 22px; left: 0; right: 0; margin: 10px auto; text-align: center; } .custom-div-icon i.awesome { margin: 12px auto; font-size: 17px; color: #000000; } @keyframes glowing { 0% { background-color: #004A7F; // I need to change this value for each marker in HTML script below box-shadow: 0 0 10px #004A7F; // I need to change this value for each marker in HTML script below } 50% { background-color: #00cc00; // I need to change this value for each marker in HTML script below box-shadow: 0 0 30px #00cc00; // I need to change this value for each marker in HTML script below } 100% { background-color: #004A7F; // I need to change this value for each marker in HTML script below box-shadow: 0 0 10px #004A7F; // I need to change this value for each marker in HTML script below } 

Javascript на моей странице бритвы:

  // Function adds the marker to the center of the map. function addMarkerToMap() { var id = document.getElementById("markerNameInput").value; if (id == "") { alert("Marker Name is missing! nPlease complete the required field"); return; } // If the marker id already exists, throw error. var found = componentList.includes(id); if (found == true) { alert("Marker ID already exists! nPlease choose another one"); return; } var markerColorHiddenField = document.getElementById("markerColorHiddenField").value; var markerIconColorHiddenField = document.getElementById("markerIconColorHiddenField").value; var markerIconBackgroundColorHiddenField = document.getElementById("markerIconBackgroundColorHiddenField").value; var markerAlarmColorHiddenField = document.getElementById("markerAlarmColorHiddenField").value; var fontAwesomeInput = document.getElementById("fontAwesomeInput").value; var markerSizeSelect = document.getElementById("markerSizeSelect").value; if (markerSizeSelect == "Standard") { // Create the marker using the custom class and design // parameters from the user selection. icon = L.divIcon({ className: 'custom-div-icon', // HELP HELP HELP - THIS LINE BELOW IS WHERE I NEED TO ACCESS {amp}amp; OVERRIDE THE KEYFRAME VALUES html: "{amp}lt;div class='marker-pin' style='background:"   markerColorHiddenField   "; --color:"   markerIconBackgroundColorHiddenField   ";'{amp}gt;{amp}lt;/div{amp}gt;{amp}lt;i class='"   fontAwesomeInput   " awesome'style='color:"   markerIconColorHiddenField   ";'{amp}gt;", iconSize: [30, 42], iconAnchor: [15, 42] }); } else if (markerSizeSelect == "Large") { // Create the marker using the custom class and design // parameters from the user selection. icon = L.divIcon({ className: 'custom-div-icon', // HELP HELP HELP - THIS LINE BELOW IS WHERE I NEED TO ACCESS {amp}amp; OVERRIDE THE KEYFRAME VALUES html: "{amp}lt;div class='marker-pin' style='background:"   markerColorHiddenField   "; --color:"   markerIconBackgroundColorHiddenField   "; width:50px; height:50px; --width:40px; --height:40px; --margin:5px 0 0 5px;'{amp}gt;{amp}lt;/div{amp}gt;{amp}lt;i class='"   fontAwesomeInput   " awesome'style='color:"   markerIconColorHiddenField   "; font-size:30px;'{amp}gt;", iconSize: [9, 34], iconAnchor: [15, 34] }); } else if (markerSizeSelect == "X-Large") { // Create the marker using the custom class and design // parameters from the user selection. icon = L.divIcon({ className: 'custom-div-icon', // HELP HELP HELP - THIS LINE BELOW IS WHERE I NEED TO ACCESS {amp}amp; OVERRIDE THE KEYFRAME VALUES html: "{amp}lt;div class='marker-pin' style='background:"   markerColorHiddenField   "; --color:"   markerIconBackgroundColorHiddenField   "; width:60px; height:60px; --width:50px; --height:50px; --margin:5px 0 0 5px; background-color:#00cc00;'{amp}gt;{amp}lt;/div{amp}gt;{amp}lt;i class='"   fontAwesomeInput   " awesome'style='color:"   markerIconColorHiddenField   "; font-size:30px;'{amp}gt;", iconSize: [0, 30], iconAnchor: [15, 30] }); } } 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector