DOM元素属性值可以是JavaScript对象吗？

Question

Maybe this is a duplicate, but I could find the similar question.

For example we have <input data-student=""> and we have a var studentObj = {...} . Can I assign studentObj to input data-student attribute? Will it contradict the standards?

Answer 1

Attribute values are always strings, so no. You have several options:

1. Store the object in string form, such as JSON, in the attribute.

2. Store the object in a container somewhere and keep a key for it in the attribute.

3. If you mean on an element instance, it's possible to add your own properties to element instances, and those properties can have any value (search for "expando properties" for details), but be sure to use a name that will be really, really specific to your situation. (jQuery does this, for example, for the data it manages via the data function.)

   • And in fact, if you're using jQuery, you could use data to store the object, leaving the details to jQuery. :-)

Answer 2

Sure will! HTML doesn't accept a data type of object, it is in fact just plain text

Answer 3

What you are looking for is the dataset attribute. But it only stores strings, you can solve this with JSON.

el.dataset.student = JSON.stringify(studentObj);

studentObj = JSON.parse(el.dataset.student);

With jquery's data method ( https://api.jquery.com/data/ ) you can store objects without any further problems.

Read more:

Dataset: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset -

JSON: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON

Answer 4

Actually your desire doesn't contradict the standards, you must stringify your object and put in your data attribute then in usage parse it, like below:

const q = document.querySelector.bind(document); // it's just for easiness

const input = q('input'); //select the input

const studentObj = { // make your student object
    something: 'some-value'
};

input.dataset.student = JSON.stringify(studentObj);
// put the student object in your selected input data attribute

When you wanna use it you can parse it:

const input = q('input'); //select the input

const myDesireObject = JSON.parse(input.dataset.student);