Question

我有以下HTML

    <h4 data-padding-top="100" data-padding-left="0" data-text-align="left" data-color="#ffffff">Promotion Two</h4>

我想获取数据属性并将它们作为CSS样式分配给H4。我有以下JS代码，但css函数调用给出了一个错误（我不想简单地添加style =＆＃34;＆＃34 ;;在HTML中客户端不舒服）：< / p>

    var H4obj = {},
        $thisH4;

    function css(el, styles) {
        console.log(styles);
        for (var property in styles)
            el.style[property] = styles[property];
    }

    $('h4').each(function(index, el) {
        $thisH4 = $(this);

        var el = $thisH4;

        data = $thisH4.data();

        $.each(data, function(key, val){
            H4obj['data-' + key] = val;
        });

        $.each(H4obj, function(index, value){                
            css($thisH4, {index:value});
        });
    });

我过度杀了这个，有没有更简单的方法呢？

非常感谢任何帮助

Answer 1

我认为你犯了几个错误...我认为你有更多的变量而不是必要的，因为你已经在使用jquery，你应该使用jquery的内置方法.css。

$('h4').each(function(index, el) {
    var $el = $(el); // the jquery h4 object

    var data = $el.data();
    $el.css(data);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h4 data-text-align="left" data-color='red'>Test One</h4>

<h4 data-text-align="right" data-color="blue">Test Two</h4>

基本上，.css需要一个键值对，其中“数据 - ”会从键中删除。这正是.data()给你的。另外请确保声明所有变量（它们可能已在您发布的代码段上方声明，我无法分辨）。

jQuery -get数据属性＆amp;将它们分配为键值对中的CSS

1 个答案: