使用CSS的<div>标记中的目标数据

Question

我试图使一个<div>有较低的高度和数据-图像-src是灰度，直到它被点击，它将恢复完整的高度和颜色。

按照设置我的视差jquery的方式，背景图像是在数据图像-src中设置的，并且不确定如何使用CSS来确定它是否得到了filter: grayscale(100%)。

下面是如何设置HTMl

<div class="parallaxmenu" id="parallax-4" data-parallax="scroll" data-image-src="../pictures/drinks.png">

我想把目标对准data-image-src="(Image)"

有办法做到这一点吗?还是必须以不同的方式设置Jquery？

Answer 1

您可以使用div[data-image-src]来针对具有该属性的任何div，也可以使用div[data-image-src="(Image)"]以该属性和属性值为目标。

Answer 2

如果您只需要目标，@z古德回答了这个问题，但是如果您希望获得属性的值，则需要使用Javascript：

​

var x = document.getElementById("parallax-4").getAttribute("data-image-src");
console.log(x);

<div class="parallaxmenu" id="parallax-4" data-parallax="scroll" data-image-src="../pictures/drinks.png">

​