js jQuery，有沒有一種方法可以設置/獲取屬性中的多值？

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

有一個很好的答案，你在這里

基本上，您需要使用jQuery的數據函數而不是“ 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> 

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;