Question

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

我想获取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"这是一个字符串。

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

提前致谢。

Answer 1

属性值必须是字符串，因此浏览器会将数组转换为字符串。字符串化数组的结果等于调用Array.prototype.join方法。

要将字符串转换为数组，您可以撤消该过程：按,分割：

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

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

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

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

Answer 2

给你一个很好的答案here

基本上，您需要使用jQuery's data function而不是＆＃34; attr＆＃34;，并以JSON格式的格式提供数据。

我修复了你的代码（这真的不是正确的方式），这是一个有效的例子：

＆＃13;

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>");

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 3

您可以使用jquery data。

像

这样的东西

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

然后，稍后使用

获取

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

请参阅https://api.jquery.com/data/

Answer 4

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

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;

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

4 个答案: