Question

是否可以迭代HTML页面中的每个标记，以查找具有明确设置的特定CSS属性的标记？

在某种程度上：

android {
useLibrary 'org.apache.http.legacy'
packagingOptions {
    exclude 'META-INF/DEPENDENCIES'
    exclude 'META-INF/NOTICE'
    exclude 'META-INF/LICENSE'
    exclude 'META-INF/LICENSE.txt'
    exclude 'META-INF/NOTICE.txt'
    }
}

编辑：理想情况下，我正在寻找一个纯JS解决方案（没有jQuery）。

Answer 1

如果你可以使用jquery然后检查

$('div').filter(function() {
   return $(this).css('background-imae') == 'something';
});

它将为您提供具有特定背景图像的Div组

对于纯js解决方案，请检查this

var xx = document.querySelectorAll("div,span");

for (var i = 0; i < xx.length; i++) 
{
    if ( xx[ i ].style.backgroundImage = '' )
    {
     //do your stuff here
    }
}

或者您可以通过检查this

等样式进行过滤

function getStyle(el,styleProp)
{
    var x = document.getElementById(el);
    if (x.currentStyle)
        var y = x.currentStyle[styleProp];
    else if (window.getComputedStyle)
        var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);
    return y;
}

Answer 2

迭代的完整参考。 Find tags that have a CSS

Answer 3

这是另一种本地方式。

var elems = Array.prototype.slice.call( document.querySelectorAll('[style]'));
styledElems = elems.filter(function( elem ){
  return elem.style.background;
})
// you don't the rest. just needed to show that it works
.map( function( elem ){
  return elem.className || elem.tagName;  
});
stackLog( styledElems );

function stackLog( val ){
  document.querySelector('#console').innerHTML += JSON.stringify( val, 0, 2 );
}

<!-- You can ignore this html, it's just to have something to test with -->
<section class="thing">
	<header class="thing__header">
		<h3 class="thing__header-heading" style="background:red">Thing Heading</h3>
	</header>
	<div class="thing__content">
		<p class="thing__content-paragraph first" style="background:blue">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius doloremque laborum sapiente libero autem necessitatibus</p>
		<p class="thing__content-paragraph second" style="color:red">
			blanditiis quisquam doloribus dolor molestias corporis a quam eum nisi
		</p>
	</div>
	<footer class="thing__footer">
		<p>ea voluptate, praesentium iste saepe.</p>
	</footer>
</section>
<pre id="console"></pre>

Answer 4

备注：

如果您需要检查所有页面，nodeList将非常大。尝试搜索特定的类，例如.myElement而不是div。您也可以使用*来抓取所有网页，但是，如果可以，请避免使用。

小心颜色，颜色将以rgb而不是hex返回。

var elementNodeList = document.querySelectorAll('*'); // get a node List of element of your choice. var filteredElements = Array.prototype.filter.call(elementNodeList, function (node) { var getCompoundStyle = window.getComputedStyle(node); return getCompoundStyle.getPropertyValue('property-name') === 'specifiedProperty'; });

您的filteredItems将位于filteredElements变量中。

查找明确设置了CSS字段的标记

4 个答案: