html为何转换为json,将HTML元素的“样式”属性转换为JSON

6 个答案:

答案 0 :(得分：2)

这个怎么样：

function getStyles(el) {

var output = {};

if (!el || !el.style || !el.style.cssText) {

return output;

}

var camelize = function camelize(str) {

return str.replace (/(?:^|[-])(\w)/g, function (a, c) {

c = a.substr(0, 1) === '-' ? c.toUpperCase () : c;

return c ? c : '';

});

}

var style = el.style.cssText.split(';');

for (var i = 0; i < style.length; ++i) {

var rule = style[i].trim();

if (rule) {

var ruleParts = rule.split(':');

var key = camelize(ruleParts[0].trim());

output[key] = ruleParts[1].trim();

}

}

return output;

}

var element = document.querySelector('div');

var css = getStyles(element);

console.log('css ->', css);

输出：强>

{

color: "green",

border: "1px solid orange",

marginLeft: "15px",

padding: "20px",

backgroundColor: "white"

}

小提琴：强>

答案 1 :(得分：2)

HTML

的JavaScript

var styles = $('#myElt').attr('style').split(';'),

i= styles.length,

json = {style: {}},

style, k, v;

while (i--)

{

style = styles[i].split(':');

k = $.trim(style[0]);

v = $.trim(style[1]);

if (k.length > 0 && v.length > 0)

{

json.style[k] = v;

}

}

alert($.toJSON(json));

答案 2 :(得分：2)

也许这么轻微的答案，但我遇到了这个线程，寻找一种方法将style属性转换为一个对象，准备传递给$(el).css()。我结束了写这个小插件来做到这一点：

$.fn.styleAttributeToObject = function () {

var style = $(this).attr('style'),

asObject = {};

if ('string' === typeof style) {

$.each(style.split(';'), function (i, e) {

var pair = e.split(':');

if (2 === pair.length) {

asObject[pair[0]] = pair[1];

}

});

}

return asObject;

};

希望它对其他人有所帮助。

答案 3 :(得分：2)

你也可以自己动手 - 这并不难。 style的{​​{3}}提供了充足的数据：

function getStyles(element) {

var style = element.style;

var ret = {};

for (var i = 0; i < style.length; ++i) {

var item = style.item(i);

ret[item] = style[item];

}

return ret;

}

答案 4 :(得分：1)

你可以从element.style.cssText中获取一个字符串并将其拆分

function styleObject(element){

var obj= {},

str= element.style.cssText.match(/([^:]+\: *[^;]+); */g),

tem, i= 0, ax, L= str.length;

while(i

tem= str[i++].split(/: */);

obj[tem[0]]= tem[1];

}

return obj;

}

//例 -

styleObject(elementreference);

/* value: (Object)

{

display: 'block;',

margin-left: '1ex;',

margin-right: 'auto;',

position: 'relative;',

width: '1193px;',

z-index: '100;',

visibility: 'visible;'

}

但为什么不直接使用cssText字符串作为值？

答案 5 :(得分：-1)

从技术上讲是“单线”(不要这样做)[ES6]

let json = document.querySelector('div').getAttribute('style')

.split(';')

.filter(s => s.length)

.reduce((json, s) => ({ ...json, [s.split(':')[0].trim()]: s.split(':')[1].trim() }), {})

(使用HTML)：