Question

我有两个<div>喜欢这些：

<div class='test' style='visibility: visible;'> div1 </div>
<div class='test'> div2 </div>

现在我想在点击 div1 时向我显示警告，因为它具有visibility属性。换句话说：

$(".test").click(function(e) {
    if (this has visibility property){
        alert('it has');
    } 
});

现在我想知道如何使用jquery在上面的代码中定义条件？

这是我的尝试：（但它们都不起作用）

if($(this).css('visibility').length != 0) {}

if($(this).css('visibility') == 'visible') {}

if($(this).hasClass('visibility-set')) {}

那么，有什么解决方案吗？

Answer 1

如果指定的样式不存在，请尝试this.style.visibility，因为它会返回inline-css或空字符串''的值！

＆＃13;

$(".test").click(function(e) {
  if (this.style.visibility) {
    alert('It\'s set!');
  } else {
    alert('Not set!');
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='test' style='visibility: visible;'>div1</div>
<div class='test'>div2</div>

＆＃13;

Answer 2

为了完整起见，因为你要求jQuery方式。这是一个使用jQuery prop（）函数的解决方案。

$(".test").click(function(e) {
   if ($(this).prop('style')['visibility']) {
     alert('It\'s set!');
   } else {
     alert('Not set!');
   }
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='test' style='visibility: visible; display: block;'>div1</div>
<div class='test'>div2</div>

Answer 3

你可以尝试这个：

$('.test').click( function() { alert('It\'s set!'); });
$('.test1').click( function() { alert('not set!'); });

DEMO FIDDLE

如何确定元素上的CSS属性？

3 个答案: