javascript - 在javascript中实现 "::-moz-focus-inner {border:0;}"

Question

我想删除 Firefox 中输入按钮上丑陋的焦点轮廓。我尝试在我的 html 中添加 ::-moz-focus-inner {border:0;} 作为样式，这最初有效，但当通过 javascript 重新创建按钮元素时无效。

我试过:

cell.style.mozFocusInner.border = "0";
cell.style["-moz-focus-inner"] = "{border:0}";
cell.style["-moz-focus-inner"]["border"] = "0";

等等

一般来说，如何将 css“映射”到 javascript？

Answer 1

根据CSS property to IDL attribute算法，一个 -moz-focus-inner 会被驼峰命名为 MozFocusInner。所以你可以使用其中之一

element.style.MozFocusInner = value;
element.style.setPropertyValue('-moz-focus-inner', value);
element.style.setProperty('-moz-focus-inner', value);
element.style.setProperty('-moz-focus-inner', value, '!important');

但是有一个大问题:-moz-focus-inner不是CSS属性，是伪元素。

给定一个元素，您可以通过 getComputedStyle 读取其伪元素的计算样式:

getComputedStyle(element, '::-moz-focus-inner').borderTopWidth; // 1px

但是，您不能直接设置它们。如果你想这样做，你可以:

• 有条件地在样式表中设置所需的样式，并使用 JS 随时触发该条件。例如，添加一个类。

  document.getElementById('enable').addEventListener('click', function() {
    document.getElementById('target').classList.remove('no-focus-inner');
  });
  document.getElementById('disable').addEventListener('click', function() {
    document.getElementById('target').classList.add('no-focus-inner');
  });

  .no-focus-inner::-moz-focus-inner {
    border: none;
  }

  <ol>
    <li><button id="enable">Enable inner outline</button> or <button id="disable">Disable inner outline</button></li>
    <li>Press Tab key</li>
    <li><button id="target">Focus me to check if I have inner outline</button></li>
  </ol>

• 使用所需的规则集创建一个新的样式表，并将其附加到文档中。

  var styleSheet = document.createElement('style');
  styleSheet.textContent = '#target::-moz-focus-inner { border: none; }';
  document.getElementById('enable').addEventListener('click', function() {
    if(styleSheet.parentNode) document.head.removeChild(styleSheet);
  });
  document.getElementById('disable').addEventListener('click', function() {
    document.head.appendChild(styleSheet);
  });

  <ol>
    <li><button id="enable">Enable inner outline</button> or <button id="disable">Disable inner outline</button></li>
    <li>Press Tab key</li>
    <li><button id="target">Focus me to check if I have inner outline</button></li>
  </ol>