Question

我是一个javascript新手，所以对我很轻松。我想要选择一堆只能通过内联CSS（不是类或ID或任何东西）识别的文本，并创建一个打开和关闭它的切换。所以 - 用backgroundColor ='＃eed6b4'查找所有内容并切换display ='none'/'inline-block'

需要javascript和html ... thx

=====================

这是我最初尝试过的：

<script type="text/javascript">

    function toggleVisibility() {

       var codeNum = document.getElementsByClassName('syntaxHighlightingPlugin');
             i = codeNum.length;

       while(i--) {
            codeNum[1].style.backgroundColor = '#eed6b4';

          if(codeNum.style.display == 'inline-block')
             codeNum.style.display = 'none';
          else
             codeNum.style.display = 'inline-block';
       }
    }

</script>


<button type="button" onclick="toggleVisibility();"> Hide numbers (for copying) </button>

哦，当我回复评论时，关于这个问题的转折是它是由TWiki插件呈现的文本，所以我无法控制所产生的CSS ---正如我所说的那样没有类 ---也，因为它被渲染，我想我可能需要使用类似getComputedStyle（？）的东西。

Answer 1

使用内联css通常是不好的做法，并且使你的Javascript依赖于内联CSS也不是一个好主意。但是，如果要根据属性的值选择元素，可以使用属性值选择器，如下所示：

$("[style='backgroundColor *= #eed6b4']").hide();

提醒：这使用jQuery。

Answer 2

您可以将类设置为该背景颜色，然后按类名$（“。classname”）进行过滤。

OR

你可以添加一个新的选择器，如下所述： Is there a style selector in jQuery?

不一定是个好主意，但你可以为它添加一个新的Sizzle选择器：

$.expr[':'].width = function(elem, pos, match) { return $(elem).width() == parseInt(match[3]); }   你可以这样使用它：

$('div:width(970)')   //但是，这将是非常缓慢的，所以你想缩小与你所比较的元素的数量＆gt;：

$('#navbar>div:width(970)')   //仅选择那些作为导航栏直接后代的div，其宽度也为970px。

javascript由CSS选择并切换显示

2 个答案: