blocks|key|1588497|text|只需将函数中的样式属性usages从Element.style.display更改为Element.style.bottom即可。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1588498|function+myFunction()+{
++++var+x+=+document.getElementById("myDIV");
++++if+(x.style.bottom+===+"0px")+{
++++++++x.style.bottom+=+"300px";
++++}+else+{
++++++++x.style.bottom+=+"0px";
++++}
}+|code-block|syntax|javascript|1588499|您可以使用三元运算符简化此函数：|1588500|function+myFunction()+{
++++var+x+=+document.getElementById("myDIV");
++++(x.style.bottom+===+"0px")?+x.style.bottom+=+"300px":+x.style.bottom+=+"0px";
}+|1588501|​|1588502|html,+body{
+overflow-y:+auto;
+height:+500px;
+position:+relative;
}|1588503|<div+id="myDIV"+style="position:+absolute;+bottom:+0px;+width:+50%25;+border:+1px+solid+black;">
Div
</div>
<button+style="position:+fixed;"+onClick="myFunction()">Toggle+Bottom+Property+of+#myDiv</button>
<script>
function+myFunction()+{
++++var+x+=+document.getElementById("myDIV");
++++if+(x.style.bottom+===+"0px")+{
++++++++x.style.bottom+=+"300px";
++++}+else+{
++++++++x.style.bottom+=+"0px";
++++}
}+
</script>|1588504|1588505|要为div属性添加transition，只需将transition:+bottom+1s添加到div，这样当bottom属性更改时，它将开始一个持续1秒的转换。|1588506|1588507|html,+body{
+overflow-y:+auto;
+height:+500px;
+position:+relative;
}

.animateBottom{
++++transition:+bottom+1s;
}|1588508|<div+id="myDIV"+style="position:+absolute;+bottom:+0px;+width:+50%25;+border:+1px+solid+black;"+class="animateBottom">
Div
</div>
<button+style="position:+fixed;"+onClick="myFunction()">Toggle+Bottom+Property+of+#myDiv</button>
<script>
function+myFunction()+{
++++var+x+=+document.getElementById("myDIV");
++++if+(x.style.bottom+===+"0px")+{
++++++++x.style.bottom+=+"300px";
++++}+else+{
++++++++x.style.bottom+=+"0px";
++++}
}+
</script>|1588509|1588510|entityMap^0|I|L|16|K|0|0|0|0|0|0|0|0|9|A|N|L|1I|6|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|15|8|@$9|16|A|17|B|C]|$9|18|A|19|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|1A|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|1B|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|1C|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|1D|8|@]|D|@]|E|$]]|$1|Q|3|R|5|H|7|1E|8|@]|D|@]|E|$I|J]]|$1|S|3|T|5|H|7|1F|8|@]|D|@]|E|$I|J]]|$1|U|3|P|5|6|7|1G|8|@]|D|@]|E|$]]|$1|V|3|W|5|6|7|1H|8|@$9|1I|A|1J|B|C]|$9|1K|A|1L|B|C]|$9|1M|A|1N|B|C]]|D|@]|E|$]]|$1|X|3|P|5|6|7|1O|8|@]|D|@]|E|$]]|$1|Y|3|Z|5|H|7|1P|8|@]|D|@]|E|$I|J]]|$1|10|3|11|5|H|7|1Q|8|@]|D|@]|E|$I|J]]|$1|12|3|P|5|6|7|1R|8|@]|D|@]|E|$]]|$1|13|3|-4|5|6|7|1S|8|@]|D|@]|E|$]]]|14|$]]

<p>Just change the style property usages in the function from <code>Element.style.display</code> to <code>Element.style.bottom</code>.</p>

<pre><code>function myFunction() {
    var x = document.getElementById("myDIV");
    if (x.style.bottom === "0px") {
        x.style.bottom = "300px";
    } else {
        x.style.bottom = "0px";
    }
} 
</code></pre>

<p>You can simplify this function using a ternary operator:</p>

<pre><code>function myFunction() {
    var x = document.getElementById("myDIV");
    (x.style.bottom === "0px")? x.style.bottom = "300px": x.style.bottom = "0px";
} 
</code></pre>

<p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-css lang-css prettyprint-override"><code>html, body{
 overflow-y: auto;
 height: 500px;
 position: relative;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="myDIV" style="position: absolute; bottom: 0px; width: 50%; border: 1px solid black;"&gt;
Div
&lt;/div&gt;
&lt;button style="position: fixed;" onClick="myFunction()"&gt;Toggle Bottom Property of #myDiv&lt;/button&gt;
&lt;script&gt;
function myFunction() {
    var x = document.getElementById("myDIV");
    if (x.style.bottom === "0px") {
        x.style.bottom = "300px";
    } else {
        x.style.bottom = "0px";
    }
} 
&lt;/script&gt;</code></pre>
</div>
</div>
</p>

<p>To add a <code>transition</code> for the <code>bottom</code> CSS property, just add <code>transition: bottom 1s</code> to the div so when the bottom property changes, it will start a transition lasting 1 second.</p>

<p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-css lang-css prettyprint-override"><code>html, body{
 overflow-y: auto;
 height: 500px;
 position: relative;
}

.animateBottom{
    transition: bottom 1s;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="myDIV" style="position: absolute; bottom: 0px; width: 50%; border: 1px solid black;" class="animateBottom"&gt;
Div
&lt;/div&gt;
&lt;button style="position: fixed;" onClick="myFunction()"&gt;Toggle Bottom Property of #myDiv&lt;/button&gt;
&lt;script&gt;
function myFunction() {
    var x = document.getElementById("myDIV");
    if (x.style.bottom === "0px") {
        x.style.bottom = "300px";
    } else {
        x.style.bottom = "0px";
    }
} 
&lt;/script&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1268534|text|为了进一步说明hev的答案，您可以使用Javascript三元运算符(无法在此处添加注释)来进一步澄清它：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1268535|html,+body{
+overflow-y:+auto;
+height:+500px;
+position:+relative;
}

<div+id="myDIV"+style="position:+absolute;+bottom:+0px;+width:+50%25;+border:+1px+solid+black;">
++++Div
++++</div>
++++<button+style="float:+right;"+onClick="myFunction()">
++++++++Toggle+Bottom+Property+of+#myDiv
++++</button>
++++<script>
++++++function+myFunction()+{
++++++++++var+x+=+document.getElementById("myDIV");
++++++++++x.style.bottom+===+"0px"+?+x.style.bottom+=+"300px"+:+x.style.bottom+=+"0px";
++++++++++}
++++</script>|code-block|syntax|javascript|1268536|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>To further hev's answer, you could clear it up a little more by using the Javascript ternary operator (Unable to comment so adding here):</p>

<pre><code>html, body{
 overflow-y: auto;
 height: 500px;
 position: relative;
}

&lt;div id="myDIV" style="position: absolute; bottom: 0px; width: 50%; border: 1px solid black;"&gt;
    Div
    &lt;/div&gt;
    &lt;button style="float: right;" onClick="myFunction()"&gt;
        Toggle Bottom Property of #myDiv
    &lt;/button&gt;
    &lt;script&gt;
      function myFunction() {
          var x = document.getElementById("myDIV");
          x.style.bottom === "0px" ? x.style.bottom = "300px" : x.style.bottom = "0px";
          }
    &lt;/script&gt;
</code></pre>


<p>My problem is that I need to make a toggle show/hide window but instead of <code>display: none/block</code> I need it to be <code>bottom: 0px/300px</code>
so I can apply css transition to it.</p>

<p>can you guys find any solutions that will allow me to achieve the toggle function the way I  want it?</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function myFunction() {
    var x = document.getElementById("myDIV");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
} 
// So this is what I DO NOT want.
// I need it to use bottom:*value*
// instead of display:block/none</code></pre>
</div>
</div>
</p>


HTML / JS - toggle show/hide with animation

我的问题是，我需要做一个切换显示/隐藏窗口，而不是display: none/block，我需要它是bottom: 0px/300px，以便我可以应用css过渡到它。你们能找到任何解决方案，让我以我想要的方式实现切换功能吗？​function myFunction() {    var x = document.get...

问HTML / JS -使用动画切换显示/隐藏
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML / JS -使用动画切换显示/隐藏EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML / JS -使用动画切换显示/隐藏
EN