Javascript 如何在html中重写CSS类@keyframes属性

我有一个CSS类用于绘制传单.js标记。使用Javascript和razor页面表单，用户在创建标记时设计标记的外观，其中一个参数是设置为闪烁模式时标记将发光的颜色。从下面的代码中，到目前为止，我已经能够更改标记的常规颜色方案，但我正在努力找出如何访问“@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 & OVERRIDE THE KEYFRAME VALUES
            html: "<div class='marker-pin' style='background:" + markerColorHiddenField + "; --color:" + markerIconBackgroundColorHiddenField + ";'></div><i class='" + fontAwesomeInput + " awesome'style='color:" + markerIconColorHiddenField + ";'>",
            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 & OVERRIDE THE KEYFRAME VALUES
            html: "<div class='marker-pin' style='background:" + markerColorHiddenField + "; --color:" + markerIconBackgroundColorHiddenField + "; width:50px; height:50px; --width:40px; --height:40px; --margin:5px 0 0 5px;'></div><i class='" + fontAwesomeInput + " awesome'style='color:" + markerIconColorHiddenField + "; font-size:30px;'>",
            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 & OVERRIDE THE KEYFRAME VALUES
            html: "<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;'></div><i class='" + fontAwesomeInput + " awesome'style='color:" + markerIconColorHiddenField + "; font-size:30px;'>",
            iconSize: [0, 30],
            iconAnchor: [15, 30]
        });
    }
 }

//函数将标记添加到地图的中心。
函数addMarkerToMap（）{
var id=document.getElementById（“markerNameInput”）.value；
如果（id==“”）{
警报（“缺少标记名！\n请填写所需字段”）；
返回；
}
//如果标记id已存在，则抛出错误。
var found=组件列表。包括（id）；
if（find==true）{
警报（“标记ID已存在！\n请选择其他标记”）；
返回；
}
var markercolorhidfeld=document.getElementById（“markercolorhidfeld”）.value；
var markericolorhiddenfield=document.getElementById（“markericolorhiddenfield”）.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；
如果（markerSizeSelect==“标准”）{
//使用自定义类和设计创建标记
//来自用户选择的参数。
icon=L.divIcon({
className:“自定义div图标”，
//帮助-下面这一行是我需要访问和覆盖关键帧值的地方
html:“”，
iconSize:[30,42]，
iconAnchor:[15,42]
});
}else if（markerSizeSelect==“大”）{
//使用自定义类和设计创建标记
//来自用户选择的参数。
icon=L.divIcon({
className:“自定义div图标”，
//帮助-下面这一行是我需要访问和覆盖关键帧值的地方
html:“”，
iconSize:[9,34]，
iconAnchor:[15,34]
});
}else if（markerSizeSelect==“X-Large”）{
//使用自定义类和设计创建标记
//来自用户选择的参数。
icon=L.divIcon({
className:“自定义div图标”，
//帮助-下面这一行是我需要访问和覆盖关键帧值的地方
html:“”，
iconSize:[0,30]，
iconAnchor:[15,30]
});
}
}

看看Web动画API。与仅使用CSS相比，您可以更轻松地更改关键帧之类的内容。例如，您的代码将通过API像这样执行

// assign timings
var marker1timing = {
  duration: 500,
  fill: "both",
  easing: "ease-in-out",
  iterations: 1
};

// assign keyframes
var marker1keyframes = [
{
    backgroundColor: '#004A7F', 
    boxShadow: '0 0 10px #004A7F'
},
{
    backgroundColor: '#00cc00',
    boxShadow: '0 0 30px #00cc00'
},
{
    backgroundColor: '#004A7F',
    boxShadow: '0 0 10px #004A7F'
}
];

// call the animation
var glowingMarker1 = document
    .getElementById("#yourID")
    .animate(marker1timing, marker1keyframes);

// pauses the animation until it is needed to run
glowingMarker1.pause();

// use glowingMarker1.play() inside an event handler to make the animation happen

---

看看Web动画API。与仅使用CSS相比，您可以更轻松地更改关键帧之类的内容。例如，您的代码将通过API像这样执行

// assign timings
var marker1timing = {
  duration: 500,
  fill: "both",
  easing: "ease-in-out",
  iterations: 1
};

// assign keyframes
var marker1keyframes = [
{
    backgroundColor: '#004A7F', 
    boxShadow: '0 0 10px #004A7F'
},
{
    backgroundColor: '#00cc00',
    boxShadow: '0 0 30px #00cc00'
},
{
    backgroundColor: '#004A7F',
    boxShadow: '0 0 10px #004A7F'
}
];

// call the animation
var glowingMarker1 = document
    .getElementById("#yourID")
    .animate(marker1timing, marker1keyframes);

// pauses the animation until it is needed to run
glowingMarker1.pause();

// use glowingMarker1.play() inside an event handler to make the animation happen

---

您好，非常感谢您的反馈，这是一本有趣的读物。当我尝试在javascript中编译var'marker1keyframes'位，并使用weblink中的示例时，我在不同的代码位下得到了一些扭曲的线条，这一定是因为我在某个地方错误地编译了脚本。我会继续努力的……好吧，如果你需要进一步的帮助，请告诉我。我花了一点时间才掌握API的诀窍，但一旦你让它工作起来，它就非常强大了。它不是100%受支持的，但是在线查看polyfill，它甚至可以在IE上使用。嗨，当我插入“背景色”或“框阴影”时，问题出现了。java脚本似乎不喜欢这两个词之间有连字符。非常感谢。我预计有几个谜团需要解决，其中一个是添加到地图中的每个标记可能需要不同的十六进制值颜色，即，如果最终用户可能希望为创建的每个标记使用不同的方案，则硬编码关键帧中的值将无法工作。当然，我会想办法的。是的，那是它的伴侣，我需要补充一句，非常感谢你的反馈，这是一本有趣的读物。当我尝试在javascript中编译var'marker1keyframes'位，并使用weblink中的示例时，我在不同的代码位下得到了一些扭曲的线条，这一定是因为我在某个地方错误地编译了脚本。我会继续努力的……好吧，如果你需要进一步的帮助，请告诉我。我花了一点时间才掌握API的诀窍，但一旦你让它工作起来，它就非常强大了。它不是100%受支持的，但是在线查看polyfill，它甚至可以在IE上使用。嗨，当我插入“背景色”或“框阴影”时，问题出现了。java脚本似乎不喜欢这两个词之间有连字符。非常感谢。我预计有几个谜团需要解决，其中一个是添加到地图中的每个标记可能需要不同的十六进制值颜色，即，如果最终用户可能希望为创建的每个标记使用不同的方案，则硬编码关键帧中的值将无法工作。当然，我会想办法的。是的，那是它的伴侣，我需要补充