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)：

總結

以上是生活随笔為你收集整理的html为何转换为json,将HTML元素的“样式”属性转换为JSON的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。