使用Javascript或jquery更改数据属性的值[重复]答案

【问题标题】：Change the value of a data attribute using Javascript or jquery [duplicate]使用Javascript或jquery更改数据属性的值[重复]
【发布时间】：2017-11-08 06:13:04
【问题描述】：

我正在尝试根据用户屏幕分辨率更改 div 元素的数据属性，我正在使用 impress.js 库，我想设置数据属性为 scale 的 div 概览，该值我要切换的是台式机的 2.0 和笔记本电脑的 2.5。

到目前为止，下面是我的代码。

<div id="overview" class="step" data-x="-700" data-y="-500" data-scale="2">
    </div>

我的 jquery 代码是。

$(window).resize(function() {

   if(window.innerWidth == 1680){

   $('#overview').data('scale', 2);

   }else{

     $('#overview').data('scale', 2.5);

   }

})

我能够获取 innerWidth 的值，但无法更改 data 属性的值，任何建议都会很棒！

【问题讨论】：

你没有说任何问题...
如果你想改变属性使用.attr()即$('#overview').attr('data-scale', 2.5);
window.innerWidth == 1680 必须是 window.innerWidth <= 1680。因为不可能一直完全匹配。它必须是：- $('#overview').attr('data-scale', 2.5); 或 $('#overview').attr('data-scale', 2);
使用if($(window).width() >= 1680){} 代替您的条件
对不起，impress 工作时不能改变缩放的值，impress.js 有自己的方式在屏幕变化时重置视口，你可以禁用自动缩放把data-min-scale="1" data-max-scale="1" 放在你的<div id='impress'></div> 上试试看。

标签： javascript jquery html

【解决方案1】：

$(window).resize(function() {

   if(window.innerWidth == 1680){

   $('#overview').attr('data-scale', '2');

   }else{

     $('#overview').attr('data-scale', '2.5');

   }

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="overview" class="step" data-x="-700" data-y="-500" data-scale="2">demo
</div>

希望对你有所帮助。

【讨论】：