如何检索 HTML“样式”元素？答案

【问题标题】：How to retrieve HTML "style" element?如何检索 HTML“样式”元素？
【发布时间】：2014-01-29 06:13:06
【问题描述】：

我有这个 HTML 代码：

<div id="maininner" class="grid-box" style="min-height: 2500px;">

我想知道如何检索min-height 属性，将某个值减去当前值并在属性中重新加载新值。

这是怎么做到的？

我没有尝试过任何东西，因为我对 JavaScript / jQuery 完全陌生，我相信从我在互联网上搜索的内容来看是最可行的选择。

就我所见，有一个 jQuery 方法，它是 .attr()，它可以满足我的需要。

谢谢。

【问题讨论】：

api.jquery.com/css
仅供参考，min-height 不是属性，而是 CSS 属性
@A.Wolff w3schools.com/cssref/pr_dim_min-height.asp
_subtract a certain value to the current value and reload the new value in the attribute._ 你为什么要这个？

标签： javascript jquery html css styles

【解决方案1】：

试试这个 javascript 代码

<script type="text/javascript">
    function alertheight() {
        var ht = parseInt(document.getElementById("maininner").style.minHeight); //gets the current min-height
        ht = ht + 30; //adds 30 
        document.getElementById("maininner").style.minHeight = ht + "px"; // assigns new min-height 
    }
</script>

 <div id="maininner" class="grid-box" style="min-height: 2500px;">
 <input type="button" onclick="alertheight()" />

这里每次点击按钮都会增加最小高度+30像素

【讨论】：

【解决方案2】：

您需要.css() 方法：

$('#maininner').css('min-height');

这将获得浏览器解析的min-height 属性。

然后您可以使用parseInt() 来返回不带 px 后缀的值：

var min_height = parseInt( $('#maininner').css('min-height'), 10);

减去你的值后，你可以将它重新应用到元素：

min_height -= 500;

$('#maininner').css('min-height', min_height);

我已经 created an example 来证明这一点。

【讨论】：

只是好奇这里真的需要解析吗？
@jai 是的，否则你试图从一个以 px 结尾的字符串中减去一个值。结果为 NaN
我是这么说的，.css() 方法返回的值是带有 px 后缀的……而且你不能从字符串中减去整数。
这里逗号后面的 10 是什么意思：min_height = parseInt( $('#maininner').css('min-height'), 10);?
@MONZTAAA 是radix参数，强烈建议你指定一个值，该值通常为10。推荐阅读以下文章-->davidwalsh.name/parseint-radix

【解决方案3】：

$('#maininner').css({
     min-height : '1000px' // can edit as per your needs 
});

【讨论】：

【解决方案4】：

试试这个var currentValue = $("#maininner").css("min-height");

用新值重新加载

 $("#maininner").css("min-height",currentValue - subtractValue);

【讨论】：

【解决方案5】：

使用.css() 方法代替.attr()

【讨论】：