【问题标题】:How to add more CSS properties in this Javascript如何在这个 Javascript 中添加更多 CSS 属性
【发布时间】:2016-05-22 19:10:47
【问题描述】:

谁能告诉我如何为这个给定的javascript添加或分配更多属性。

$('#mydoom').each(function () {
    if ($(this).css('visibility') == 'hidden') {
        document.location.href = "http://www.example.com";
    }
});

你看到上面的脚本只有一个css标签/属性visibility:hidden,我怎样才能添加更多的属性...

类似这样的示例

$('#mydoom').each(function () {
    if ($(this).css('visibility') == 'hidden')
     ($(this).css('display') == 'none')
     ($(this).css('font-size') == '25px')
     ($(this).css('color') == 'red')
 {
        document.location.href = "http://www.example.com";
    }
});

您看到上面的脚本包含许多属性...那么我该怎么做,这不起作用,我在上面作为示例向您展示了。

我更新了帖子以使其更加清晰:

这里的例子是我的页面:它有这个脚本:

我创建是为了帮助传达,如何使这个脚本工作。

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$('#mydoom').each(function () {
    if 
($(this).css('font-size') != '25px') // See if the font-size is **25** if not then redirect.
($(this).css('color') != 'red') // See if the color is **red** if not redirect .
($(this).css('position') != 'relative') // See if the position is **relative** if not redirect.
($(this).css('float') != 'left') // See if the float is **left** if not redirect.
{
        document.location.href = "http://www.example.com";
    }
});
})
//]]>
</script>

我也添加了 html 和错误的 css 属性来检查重定向

<style>
  #mydoom {position:absolute;}
  #mydoom {font-size:24px;}
  #mydoom {color:white;}
</style>

<div id="mydoom">
mydoom
  </div>

你看,我放了 position:absolute font-size:24px 和 color:white 但是页面没有重定向,为什么?因为我已经在 javascript 中设置来检查它的值,如果它不匹配然后重定向页面。那么如何使脚本工作。

我希望你明白了。

【问题讨论】:

  • 你想做什么? css 属性处于“IF”状态。您可以使用逻辑运算符将它们链接起来。
  • @maniexx 我想要一个重定向,如果 if 语句检查分配给 id #mydoom 的几个 css 属性...然后重定向页面...它使用单个属性但如何添加到检查多个标签,如颜色、字体大小和我在那里设置的许多标签......谢谢
  • @RajeshSurry 如果您要检查每个属性是否都是这样,请将每个检查与&amp;&amp; 连接起来。
  • @RajeshSurry 而且,#mydoom 只能有一个,因为它是一个id
  • @RajeshSurry 请告诉我我的理解是否正确?

标签: javascript jquery html css redirect


【解决方案1】:

这不起作用,因为那不是有效的 javascript。您需要做的是在每个子句之间添加一个 && 符号并更正括号。

我建议您阅读 javascript 或一般的编程语法。下面是固定的代码。

$('#mydoom').each(function () {
    if ($(this).css('visibility') == 'hidden' && $(this).css('display') == 'none' && $(this).css('font-size') == '25px' && $(this).css('color') == 'red'){
        document.location.href = "http://www.example.com";
    }
});

警告,未经测试,但应该可以正常工作。

[编辑] 只是想添加,就像下面的用户一样,id 是唯一的,所以如果你想循环遍历 dom 中的多个对象,你需要添加一个类。

所以你只需将属性类添加到元素中,如下所示:

<div class="mydom"></div>

然后您只需使用 .mydom 作为选择器。

【讨论】:

  • 我已经在我的页面中添加了这个,但是重定向没有发生。
    mydoom
    现在如何使这种重定向成为可能。
【解决方案2】:

问题在于if 语句。应该是这样的:

if (condition1 [&& or || condition2]) ...

因此,将您的 if 更改为:

if ($(this).css('visibility') == 'hidden' && $(this).css('display') == 'none' && $(this).css('font-size') == '25px' && $(this).css('color') == 'red')

说清楚:

if (
  $(this).css('visibility') == 'hidden' &&  // See if the visibility is hidden.
  $(this).css('display') == 'none' &&       // See if the display is set to none.
  $(this).css('font-size') == '25px' &&     // See if the font-size is 25px.
  $(this).css('color') == 'red'             // See if the colour is red.
)                                           // And if everything above is right, then...

此外,#mydoom 只能有一个,因为它是一个id

更新:

成功和失败的小技巧:

由于某种原因,$("#mydoom").css("color") 无法返回 undefined

片段

失败

$(function() {
  if (
    $("#mydoom").css('visibility') == 'hidden' && // See if the visibility is hidden.
    $("#mydoom").css('display') == 'none' && // See if the display is set to none.
    $("#mydoom").css('font-size') == '25px' && // See if the font-size is 25px.
    $("#mydoom").css('color') == 'red' // See if the colour is red.
  )
    $("body").append("Success");
  else
    $("body").append("Fail");
});
#mydoom {
  position: absolute;
  font-size: 24px;
  color: blue;
}
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<div id="mydoom">
  mydoom
</div>

成功

$(function() {
  if (
    $("#mydoom").css('visibility') == 'hidden' && // See if the visibility is hidden.
    $("#mydoom").css('display') == 'none' && // See if the display is set to none.
    $("#mydoom").css('font-size') == '25px' // See if the font-size is 25px.
    // $("#mydoom").css('color') == 'red'          // See if the colour is red.
  )
    $("body").append("Success");
  else
    $("body").append("Fail");
});
#mydoom {
  position: absolute;
  font-size: 25px;
  color: red;
  visibility: hidden;
  display: none;
}
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<div id="mydoom">
  mydoom
</div>

【讨论】:

  • @RajeshSurry 停止像这个人一样发表评论。我已经回复了。
  • @RajeshSurry 又是错的人......这么多(,只有一个),没有&amp;&amp;。正确看上面的代码,至少复制粘贴吧。
  • @RajeshSurry 最后应该是location.hrefwindow.location.href
  • @RajeshSurry Fiddle:FailSuccess。某些东西阻止了获取颜色信息。
  • 你的代码很好用,但它也不能与 padding:5px 一起工作,我设置了 padding:5px 但它失败了,检查我的小提琴。jsfiddle.net/v7x0yt02/15为什么它不能与 padding 和 color 属性一起工作。 ?
【解决方案3】:

您可以像这样在一个对象中添加多个属性:

$(this).css({'visibility': 'hidden', 'display': 'none', 'font-size': '25px'})

【讨论】:

  • 不。他试图检查每条规则是否都是这样的。您正在设置它,但 OP 有兴趣获得它。
猜你喜欢
  • 1970-01-01
  • 2012-08-30
  • 1970-01-01
  • 1970-01-01
  • 2018-12-29
  • 1970-01-01
  • 1970-01-01
  • 2020-02-21
  • 2019-01-29
相关资源
最近更新 更多