具有特定 CSS 属性的 CSS 选择器
[英]CSS Selector with specific CSS attribute
问题描述
I have an html page:
我有一个 html 页面：
CSS CSS
#id2{background-image:url(b.png);}
HTML HTML
<div id="id1" style="background-image:url(a.png);"></div>
<div id="id2"></div>
I want to select div with CSS attributes: background-image.我想选择带有 CSS 属性的 div：background-image。 For the div1, I can do:对于 div1，我可以这样做：
div[style*='background-image']{....something....}
How can I do similar with div2?我怎样才能用 div2 做类似的事情？ I want something looks like this:我想要看起来像这样的东西：
div[background-image]{....something.....}
In my case (due to some reasons), I cannot use the ID or Class name.就我而言（由于某些原因），我不能使用 ID 或类名。 My question is:我的问题是：
In html page, there are many divs.
5 个解决方案
解决方案1
2 已采纳 2018-02-14 06:49:43
Don't know if this is enough, but you can somehow do something using jQuery不知道这是否足够，但您可以使用 jQuery 以某种方式做一些事情
if ($("#id2").css("background-image") != "none") { alert('present'); //do something if present; } else { alert('absent'); //do something if absent; }
#id2 { background-image: url('https://s7d1.scene7.com/is/image/PETCO/cat-category-090617-369w-269h-hero-cutout-d?fmt=png-alpha'); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="id2">aw</div>
The problem with this is if you just use url() , it will still show "present" , although I haven't seen any background-image that uses only url() .问题是如果你只使用url() ，它仍然会显示"present" ，尽管我没有看到任何只使用url() background-image 。 And if you want to know why I used none as comparison, you can try alerting $("#id2").css("background-image") .如果你想知道为什么我none使用作为比较，你可以尝试提醒$("#id2").css("background-image") 。
Javascript Style Javascript 风格
var someElement = document.getElementById("id2"); var currentBackgroundImage = someElement.currentStyle ? someElement.currentStyle.backgroundImage : getComputedStyle(someElement, null).backgroundImage; if (currentBackgroundImage != "none") { alert('present'); //do something if present; } else { alert('absent'); //do something if absent; }
#id2 { background-image: url('https://s7d1.scene7.com/is/image/PETCO/cat-category-090617-369w-269h-hero-cutout-d?fmt=png-alpha'); }
<div id="id2">aw</div>
解决方案2
1 2018-02-14 06:56:00
You can't do this with only css, you have to use javascript or jquery.
css()in jquery is usefulcss()很有用
please see below example.请看下面的例子。
<!DOCTYPE html> <html> <head> <style> #id2, #id3{background-image:url(b.png);} </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ var alldiv = $('div'); for (i=0;i<alldiv.length;i++){ if($(alldiv[i]).css("background-image") != "none"){ $(alldiv[i]).css("background-color","green"); } } }); }); </script> </head> <body> <h2>This is a heading</h2> <div id="id1" style="background-color:#ff0000">This is a paragraph.</div> <div id="id2" style="background-color:#ff0000">This is a paragraph.</div> <div id="id3" style="background-color:#ff0000">This is a paragraph.</div> <button>Return background-color of p</button> </body> </html>
Edit: applying to all div编辑：适用于所有 div
解决方案3
1 2018-02-14 06:56:15
You can do this using CSS selector and some jquery function .你可以使用CSS selector和一些jquery function来做到这一点。 Not possible with only CSS selectors.仅使用 CSS 选择器是不可能的。
if($('#id2').css("background-color")){ $('#id2').css('color','red'); }
div[style^="background-image"]{color:red} #id2{background-color:green}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="id1" style="background-image:url(a.png);">test content</div> <div id="id2">Test content</div>
解决方案4
0 2018-02-14 07:01:46
This is a way to do it without jQuery, using vanilla Javacript.这是一种不用 jQuery 的方法，使用 vanilla Javacript。
Use window.getComputedStyle to get the element style and check if its background-image is none , 1 by 1. Add a class has-bk-img to those who have background image, and then set your CSS to the class has-bk-img .使用window.getComputedStyle获取元素样式并检查它的background-image是否为none , 1 by 1. 为那些有背景图片的人添加一个类has-bk-img ，然后将您的 CSS 设置为类has-bk-img 。
var elems = document.querySelectorAll('div');
elems = Array.prototype.slice.call(elems);
elems.map(function(el) {
var styles = window.getComputedStyle(el);
var bkImg = styles.getPropertyValue("background-image");
if (bkImg !== "none") {
el.classList.add("has-bk-img");
}
})
demo: https://jsfiddle.net/whrz7976/11/演示： https : //jsfiddle.net/whrz7976/11/
解决方案5
-3 2018-02-14 06:48:05
Select the div without class and id选择没有class和id的div
div:nth-child(1) { background: red; } div:nth-child(2) { background: green; }
<div id="id1">div1</div> <div id="id2">div2</div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.