在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>

Answer 2

也许这可以在没有 javascript 的情况下工作：https://css-tricks.com/forums/topic/button-padding-issue/

::moz-focus-inner 是一个伪元素。在这个链接中有几种方法如何动态修改伪元素（使用 javascript）http://pankajparashar.com/posts/modify-pseudo-elements-css/

引用自http://pankajparashar.com/posts/modify-pseudo-elements-css/：

<p class="red">Hi, this is a plain-old, sad-looking paragraph tag.</p>

.red::before {
    content: 'red';
    color: red;
}

方法一

为每种样式编写带有伪元素的单独类，然后使用 JavaScript 或 jQuery 在这些类之间切换。

.green::before {
    content: 'green';
    color: green;
}

$('p').removeClass('red').addClass('green');

... 

可以像这样使用 javascript 修改常见的 css 样式（不是伪元素）：

引用自https://www.kirupa.com/html5/setting_css_styles_using_javascript.htm：

您通过 JavaScript 访问的每个 HTML 元素都有一个样式对象。此对象允许您指定 CSS 属性并设置其值。例如，设置 id 值为 superman 的 HTML 元素的背景颜色如下所示：

var myElement = document.querySelector("#superman");
myElement.style.backgroundColor = "#D93600";

要影响很多元素，你可以这样做：

var myElements = document.querySelectorAll(".bar");

for (var i = 0; i < myElements.length; i++) {
    myElements[i].style.opacity = 0;
}

简而言之，要直接使用 JavaScript 设置元素样式，第一步是访问元素。我正在使用querySelector 方法来实现这一点。第二步只是找到你关心的 CSS 属性并给它一个值。请记住，CSS 中的许多值实际上是字符串。还要记住，许多值需要一个度量单位，例如 px 或 em 或类似的东西才能真正被识别.