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";

等

一般来说，我如何＆＃34;映射＆＃34; 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

但是存在大问题：getComputedStyle(element, '::-moz-focus-inner').borderTopWidth; // 1px不是CSS属性，是伪元素。

给定一个元素，您可以通过getComputedStyle：

读取其伪元素的计算样式

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');
});

但是，您无法直接设置它们。如果你想这样做，你可以：

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

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

/var/www/

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;
}

方法1

为每个样式编写附加了伪元素的单独类，然后使用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值为超人的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 或类似的东西才能真正得到认可的

实现＆＃34; :: - moz-focus-inner {border：0;}＆＃34;在javascript中

2 个答案: