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