如何在此 Javascript 中添加更多 CSS 属性

How to add more CSS properties in this Javascript

本文关键字：CSS 属性 添加 Javascript      更新时间：2023-09-26

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

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

你看到上面的脚本只有一个css标签/属性可见性：隐藏，我如何添加更多属性...

像这样一个例子： 

$('#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>

你看，我把位置：绝对字体大小：24px 和颜色：白色，但页面没有重定向为什么？ 正如我已经在 JavaScript 中设置的那样，如果不匹配，请检查其值，然后重定向页面。 那么如何使脚本工作。

我希望你明白这一点。

这是行不通的，因为这不是有效的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 作为选择器。

您可以在对象中添加多个属性，如下所示：

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

问题出在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>

相关文章：