获取样式属性值添加'X'并设置新值答案

【问题标题】：Get style attribute value add 'X' and set the new value获取样式属性值添加'X'并设置新值
【发布时间】：2017-05-16 12:20:08
【问题描述】：

当用户点击加载更多按钮并且卡片包装器具有类列表视图时。

我想获取 mason 样式 attr 值并在其上添加 300px 并将该值设置为 mason div。

这里的问题是我可以获得 mason arrt 值，但 newheight 返回“NaN”。

请帮忙！！

$('.load-more').on('click', function() {

    if ($('.cards-wrapper').hasClass('list-view')) {

        setTimeout(function() {
            var currentHeight = $('.mason').attr('style');
            console.log('current' + currentHeight);

            var newHeight = parseInt(currentHeight);
            console.log('new height' + newHeight);
            $('.mason').css('height', newHeight + 300);

        }, 3000);

    }
});

&lt;div class="mason clear-fix" style="height: 6380px;"&gt;

【问题讨论】：

你为什么要阅读风格？？？阅读高度！ api.jquery.com/height 或 css("height")
currentHeight = $('.mason').attr('style') ??那不是高度
height 或 innerHeight 值与 mason 样式高度值不同，所以我需要获取 arrt 值

标签： javascript jquery

【解决方案1】：

从.mason 元素获取高度，而不是属性样式。

var currentHeight = $('.mason').height();

【讨论】：

我尝试使用 height 和 innerHeight 这些值不等于 mason 样式属性值

【解决方案2】：

尝试运行它。它正在工作。

jQuery(document).ready(function(){
    jQuery('.load-more').on('click', function() {

    

        setTimeout(function() {
            var currentHeight = jQuery('.mason')[0].style.height;
            console.log('current' + currentHeight);

            var newHeight = parseInt(currentHeight);
            console.log('new height' + newHeight);
            jQuery('.mason').css('height', newHeight + 300);

        }, 3000);

   
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="mason clear-fix" style="height: 6380px;">

<button class="load-more"></button>

我刚刚使用jQuery('.mason')[0].style.height; 从样式属性中获取高度值。我希望这对你有用。

谢谢。

【讨论】：

【解决方案3】：

您可以使用$('.mason').height() 或$('.mason').css("height") 来获取元素的高度，设置元素的新高度也是如此

$('.load-more').on('click', function() {


  setTimeout(function() {
    var currentHeight = $('.mason').height();
    console.log('current ' + currentHeight);

    var newHeight = parseInt(currentHeight);
    console.log('new height ' + (newHeight + 300));
    $('.mason').height((newHeight + 300));

  }, 3000);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="load-more">load more</div>
<div class="mason clear-fix" style="height: 6380px;">

【讨论】：

此值与梅森风格属性值不同 var currentHeight = $('.mason').height();
这是因为数据是从其他服务加载的，所以我无法获取用户高度或内部高度
@ArunKumar 你试过$('.mason').css("height")

【解决方案4】：

您可以使用 jQuery 的 height() 方法来获取/设置 div 的高度，请参见以下示例：

$('.load-more').on('click', function() {

   setTimeout(function() {
        var currentHeight = $('.mason').height()
        console.log('current' + currentHeight);

        var newHeight = parseInt(currentHeight) + 300;
        console.log('new height' + newHeight);
        $('.mason').height(newHeight + 300);

    }, 3000);
});

.mason {
  background-color: lightgrey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mason clear-fix" style="height: 100px;">
</div>
<input type="button" class="load-more" value="expand">

注意：您还在控制台中显示currentHeight，而不是新的：

var newHeight = parseInt(currentHeight);
console.log('new height' + newHeight);

上面的代码打印出当前高度，你应该这样做：

var newHeight = parseInt(currentHeight) + 300;
console.log('new height' + newHeight);

希望对你有帮助，再见。

【讨论】：