JS：添加样式 onload，然后使用 Javascript 删除样式 onclick

Question

我是新手，对 JavaScript 没有经验，所以请原谅我的愚蠢问题！

我正在尝试使用以下脚本向 Magento PayPal 快速评论页面中的下拉选项（运输选项）添加橙色阴影，以突出显示客户需要选择运输选项：

window.onload = function() {
if (window.location.href.indexOf('/paypal/express/review/')!= -1) {
document.querySelectorAll('select#shipping_method')[0].style.boxShadow = '0 0 4px 2px #e15500'; 
}
};

然后，我想在单击下拉菜单后删除该阴影，以向客户表明他们做出了正确的举动:-) 像这样的事情：

document.querySelectorAll('select#shipping_method').onclick = function()  { 
if (window.location.href.indexOf('/paypal/express/review/')!= -1) 
{this.style.boxShadow = 'none'; }
};

问题是，如何将这两个功能结合起来才能发挥作用？（添加阴影 onload，然后删除阴影 onclick）我已经能够使阴影出现在负载上，但由于我目前缺乏 Javascript 知识，无法让这两个功能一起工作！任何想法将不胜感激 - 请注意我无法编辑源 HTML，并希望确保它仅在此特定页面上运行。

Answer 1

这个怎么样：

if (window.location.href.indexOf('/paypal/express/review/')!= -1) {
  const select = document.querySelector('#shipping_method');

  window.addEventListener('load', function() {
    select.style.boxShadow = '0 0 4px 2px #e15500'; 
  })

  select.addEventListener('click', function() {
    this.style.boxShadow = 'none';
  })
}

只有在 url 匹配时才执行此代码，因此您不必验证两次
定义下拉列表以便您可以重复使用选择器
使用addEventListener更好

让 mw 知道它是否适合您。

祝你好运。

JS：添加样式 onload，然后使用 Javascript 删除样式 onclick

JS: Add style onload, then remove style onclick with Javascript

javascript

onclick

onload