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

时间:2016-04-03 17:38:25

标签: javascript html css

我想删除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?

2 个答案:

答案 0 :(得分: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/

答案 1 :(得分:0)

也许没有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 或类似的东西才能真正得到认可