js jQuery，有没有办法在属性中设置/获取多值？

Posted 2023-03-05

【中文标题】js jQuery，有没有办法在属性中设置/获取多值？

【英文标题】：js jQuery, is there a way to set/get multi value in attribute?

【发布时间】：2016-10-02 07:00:25

【问题描述】：

我正在尝试将属性设置为具有多个值的元素。有可能吗？

我想获取div元素的大小（高度、宽度）并设置在一个数组中，然后将该数组设置为属性值。

我做的是这样的：

function originBoxSize() 
    each('body div', function () 
        var boxSize = [$(this).css('height'), $(this).css('width')];// get the box size 
        $(this).attr('wcag-origin-box-size', boxSize); // set an new attr with boxsize value
    );

现在boxSize 持有["102px", "499px"]

attr 看起来像这样：

wcag-origin-box-size="102px,499px"

当我想获得 attr 值时，我正在输入以下行：

$('#element').attr('wcag-origin-box-size')

结果是这样的："102px,499px" 这是一个字符串。

有没有办法只从属性中获取特定值（高度或宽度）？

提前致谢。

【问题讨论】：

为什么不直接用 , 分割值呢？ $('#element').attr('wcag-origin-box-size').split(",")[0] 会给你高度。

看getComputedStyle()developer.mozilla.org/en-US/docs/Web/API/Window/…

我可以这样做，以防我不成功这种方式我会分裂，但我很高兴有一种方法来获取/设置多个值

您可以将每个值设置为自己的属性。或序列化数组/对象/等。到一个字符串，设置它，并在读取它时反序列化它。或者，正如已经建议的那样，只是拆分字符串（这基本上只是一个自定义序列化）。一个属性本身只能包含一个值，并且该值是一个字符串。

检查这个小提琴：jsfiddle.net/mort3za/8s2z8dLw/6

【参考方案1】：

你有一个很好的答案here

基本上您需要使用jQuery's data function 而不是“attr”，并以JSON 有效的格式提供数据。

我修复了您的代码（实际上离正确的方法不远），这是一个工作示例：

function originBoxSize() 
  $('body div').each(function() 

    // Get the box size 
    var boxSizeString = '["' + $(this).css('height') + '","' +
      $(this).css('width') + '"]';
    boxSize = JSON.parse(boxSizeString);

    // Set an new attr with boxsize value
    $(this).data('wcag-origin-box-size', boxSize);
  );


// Set all data-wcag-origin-box-size
originBoxSize();

// Show result
var a_size = $('#a').data('wcag-origin-box-size');
var b_size = $('#b').data('wcag-origin-box-size');
$('#a').html("<p>height: " + a_size[0] + "</p>" +
  "<p>width: " + a_size[1] + "</p>");
$('#b').html("<p>height: " + b_size[0] + "</p>" +
  "<p>width: " + b_size[1] + "</p>");

div 
  margin: 3px;
  border: 2px solid white;
  color: white;
  padding: 7px;
  line-height: 14px;
  font-size: 12px;

#a 
  height: 90px;
  width: 120px;
  background: red;

#b 
  height: 65px;
  width: 200px;
  background: black;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="a"></div>
<div id="b"></div>

【参考方案2】：

您可以按照自己的方式尝试。

function originBoxSize() 
    each('body div', function () 
        var boxSize = [height:$(this).css('height'),width:$(this).css('width')];
        var myJsonString = JSON.stringify(boxSize);
        $(this).attr('wcag-origin-box-size', myJsonString ); 
    );



var myObject = JSON.parse($('#element').attr('wcag-origin-box-size')) 

您可以从 myObject 中获取值：

var height = myObject[0].height;
var width = myObject[0].width;

【参考方案3】：

您可以为此使用 jquery data。

类似

$(this).data('wcag-origin-box-size', boxSize);

然后，稍后获取使用

$('#element').data('wcag-origin-box-size');

见https://api.jquery.com/data/

【参考方案4】：

属性值必须是字符串，所以浏览器将数组转换为字符串。对数组进行字符串化的结果相当于调用Array.prototype.join方法。

对于将字符串转为数组，可以逆过程：按,分割：

var array = value.split(',');

您拥有的另一个选项是使用 jQuery .data() 方法，该方法可以按原样存储数组。

新数据值 [...] 可以是除 undefined 之外的任何 javascript 类型。

$(this).data('wcag-origin-box-size', boxSize);