Fatal编程技术网
  • javascript/
  • CSS/Javascript：为什么忽略这个声明？

CSS/Javascript：为什么忽略这个声明？

javascript html css

CSS/Javascript：为什么忽略这个声明？,javascript,html,css,Javascript,Html,Css,在尝试用Javascript制作一个基本的折叠div时，我遇到了以下奇怪的错误：；使用此代码： <html> <head> <style type="text/css"> .hidden { display: none; } </style> <script type="text/

在尝试用Javascript制作一个基本的折叠
div
时，我遇到了以下奇怪的错误：；使用此代码：

<html> 
    <head> 
        <style type="text/css">
            .hidden
            {
                display: none;
            }
        </style>
        <script type="text/javascript">
            function toggle()
            {
                var element = document.getElementById('hidden1');
                if(element.style.display === 'none')
                {
                    element.style.display = 'inline';
                }
                else
                {
                    element.style.display = 'none';
                }
            }
        </script> 
    </head> 
    <body>
        <a onclick="toggle()">Click me</a><br /> 
        <div id="hidden1" class="hidden">
            stuffs
        </div>
    </body>
</html>
我被赋予了
”
，这意味着它是空的。但是，当我在完全相同的位置执行此操作时：

console.log(document.getElementById('hidden1').style);
然后，控制台显示：

[object CSS2Properties]
具有以下特性：

0: "display"
...
display: "none"
但是，当
.hidden
的CSS声明内联移动到
div
的
样式
时，代码的工作方式与预期完全相同。有人知道为什么会这样吗

我还想知道是否有人不能重现这个问题，正如我在Centos和Windows上使用apache、Firefox 24、Chrome 30和最新的Opera浏览器时所经历的那样。

问题是你用两种不同的方式设置样式。您已经在隐藏它的div中添加了一个类，
hidden
，但是您还使用Javascript手动设置CSS属性。这两个冲突导致了你所看到的奇怪的“量子”行为

我建议使用jQuery切换可见性（您可以这样做），或者，如果您不想使用jQuery，请按照第一个答案中的说明进行操作。

问题在于您用两种不同的方式设置样式。您已经在隐藏它的div中添加了一个类，
hidden
，但是您还使用Javascript手动设置CSS属性。这两个冲突导致了你所看到的奇怪的“量子”行为

我建议使用jQuery切换可见性（您可以这样做），或者，如果您不想使用jQuery，请按照第一个答案中的说明进行操作。

。css样式和内嵌式/javascript样式显然存在不同的维度。真奇怪

基本上，javascript中的style.display只知道您设置的值，而不知道您的.css文件设置的值

下面是一个快速解决方法：

只是在if语句的顶部添加了if语句。或者您可以使用jQuery，两者都可以正常工作。

.css样式和in-line/javascript样式显然存在不同的维度。真奇怪

基本上，javascript中的style.display只知道您设置的值，而不知道您的.css文件设置的值

下面是一个快速解决方法：

只是在if语句的顶部添加了if语句。或者您可以使用jQuery，两者都可以正常工作。

这是CSS中的C（级联）。您正在检查该元素是否直接将“显示”属性设置为“无”。当您加载页面时，它不会。当您第一次单击它时，它会检查它是否为自己的样式。显示为
none
，但为
未定义
；因此，它根据您的if/else分配
“none”

现在，当您再次单击它时，它确实具有
样式。display
设置为
“none”
，因此它会将其更改为
“inline”
。元素仍然具有类
.hidden
，该类被设置为具有
显示：无
，但由于CSS继承属性的方式，元素的设置更有价值

有两种方法可以解决您的问题。您可以像这样添加display none内联

<div id="hidden1" style="display:none">

// In function toggle()
 if(!element.style.display || element.style.display === 'none')
它将首先检查空字符串或未定义的值，并检查是否将其设置为无

实际上，您可以同时执行这两项操作，但最好是尽可能不让样式内联。

这就是CSS中的C（级联）。您正在检查该元素是否直接将“显示”属性设置为“无”。当您加载页面时，它不会。当您第一次单击它时，它会检查它是否为自己的样式。显示为
none
，但为
未定义
；因此，它根据您的if/else分配
“none”

现在，当您再次单击它时，它确实具有
样式。display
设置为
“none”
，因此它会将其更改为
“inline”
。元素仍然具有类
.hidden
，该类被设置为具有
显示：无
，但由于CSS继承属性的方式，元素的设置更有价值

有两种方法可以解决您的问题。您可以像这样添加display none内联

<div id="hidden1" style="display:none">

// In function toggle()
 if(!element.style.display || element.style.display === 'none')
它将首先检查空字符串或未定义的值，并检查是否将其设置为无

实际上，您可以同时执行这两项操作，但最好是尽可能不让样式内联。

另一个选项是删除style.hidden，并在文档加载时调用函数toggle（）。

另一个选项是删除style.hidden，并调用函数toggle（））加载文档时。

提示：如果将样式内联移动，
，将不再看到“量程”状态element.style.display。提示：如果将样式内联移动，
，将不再看到“量程”状态
element.style.display
不是由CSS文件设置的。但是CSS在函数中更改，并且即使从未调用函数，
display
元素也是空的。但是CSS在函数中更改，即使从未调用函数，
display
元素也是空的。
您正在检查该元素是否直接将display属性设置为none。
那么您是说Javascript只能看到CSS的内联声明？您的浏览器有一个如何应用样式的顺序（有关更多信息，请参阅类似的内容）。您可以使用getComputedStyle来确定级联的最终结果是什么。或者您可以使用类似“如果此元素具有
隐藏的
类，则执行X，否则执行Y”的逻辑然后在切换函数中设置元素local
style.display
您可以添加和删除
隐藏的
类
，您正在检查该元素是否直接将display属性设置为none。
那么您是说Javascript只能看到CSS的内联声明吗？您的浏览器有一个应用样式的顺序（有关详细信息，请参见类似的内容