Question

如果有任何已应用，请尝试找到检索元素inline css的方法。但是没有内部/外部css应用于元素。例如 -

$('#get-inline').val( $('#myh1').css('padding-top') );

#myh1{
  font-size: 20px;
  padding-top: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<h1 id="myh1" style="font-size:30px;">Heading 1</h1>
<input type="text" id="get-inline" />

在上面的代码中，它检索使用#myh1应用的css。但是我需要它来返回null或""。没有0或NaN或其他任何内容。

如果我使用$('#myh1').attr('style');，它将返回所有内联css。但我需要一种方法来获得我需要的特定 css。

有没有办法实现我想要的？请帮忙

寻找jQuery解决方案。

Answer 1

您可以使用此脚本获取任何内部CSS的值：试试这个：

Jsfiddle：https://jsfiddle.net/hfud139c/

HTML：

<div id="myh1" style="padding-top:10px;height:10px;">Content</div>

Jquery的：

$.fn.inlineStyle = function (prop) {
         var styles = this.attr("style"),
             value;
         styles && styles.split(";").forEach(function (e) {
             var style = e.split(":");
             if ($.trim(style[0]) === prop) {
                 value = style[1];           
             }                    
         });   
         return value;
    };


    var width = $("#myh1").inlineStyle("padding-top");

Answer 2

<body>
    <div id="target" style="color: red; background-color: yellow">
        Lorem ipsum <a href='#'>dolor</a> sit amet cosectetur...
    </div>
    <script>
        function get_inline_stylesheet(source)
        {
            // clone node, so that future changes won't affect the original
            // the (true) parameter is not needed, except if you judge it necessary
            source = source.cloneNode(true)
            // disable external stylesheet
            source.setAttribute('style', 'all: reset;' + source.getAttribute('style'));
            return source.style;
        }
        var target = document.querySelector('#target');
        var stylesheet = target.style;
        console.log(stylesheet);
        console.log(stylesheet.length); // 2
        console.log(stylesheet[0]); // 'color';
        console.log(stylesheet[1]); // 'background-color';
    </script>
</body>

Answer 3

使用原生style属性：

el.style['padding-top']

完整代码：

＆＃13;

$('#get-inline').val( document.getElementById('myh1').style['padding-top'] );
$('#get-inline2').val(document.getElementById('myh1').style['font-size'] );

＆＃13;

#myh1{
  font-size: 20px;
  padding-top: 10px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<h1 id="myh1" style="font-size:30px;">Heading 1</h1>
<input type="text" id="get-inline" />
<input type="text" id="get-inline2" />

＆＃13;

如果有任何内容（没有内部或外部css），请获取元素的内联css

3 个答案: