0

ここに問題があります。divのcssプロパティを取得する必要があります。cssはにあり<style></<style>ます。

何が起こるかというと、cssプロパティの一部が返されますが、一部は返されません。

以下はコードです、これは私が変更した例です。

例を実行すると、border-width、border-color、border-styleは値を返さないことがわかります。私は何が間違っているのですか？

<!DOCTYPE html>
<html>
<head>
<style>
div { height: 50px; margin: 5px; padding: 5px; float: left}
#box1 { width: 50px; color: yellow; background-color: blue;  border-width:2px; border-color:#0C6; border-style:solid}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p id="result">&nbsp;</p>
<div id="box1">1</div>
<script>
$("div").click(function () {
var html = ["The clicked div has the following styles:"];
var styleProps = $(this).css( ["border-width","border-color","border-style","width", "height", "color", "background-color"] );
$.each( styleProps, function( prop, value ) {
html.push( prop + ": " + value );
});
$( "#result" ).html( html.join( "<br>" ) );
});
</script>
</body>
</html>

アイデアや提案をありがとう。このコードはChromeで機能します。FF18でテストしましたが、最初の3つのcss値は返されません。

4

2 に答える 2

0

コードに問題が見つかりました。どうやらFF18では、ショートカットではなく、完全なcss値を指定する必要があります。

これが私の解決策です。完全なcssプロパティを以下のように指定します。

border-bottom-color:green;
border-bottom-style:solid;
border-bottom-width:2px;

次に、値を取得するためのjqueryは次のとおりです。

var styleProps = $（this）.css（["border-bottom-width"、 "border-bottom-color"、 "border-bottom-style"、 "width"、 "height"、 "color"、 "background-色"] ）;

これは、ショートカットを持つすべてのcssプロパティに当てはまるはずです。

この質問を手伝ってくれたすべての人々に感謝します。

ありがとう

クリス

于 2013-01-21T21:24:21.337 に答える
0

使うだけ.css()！

$(element).css();

またはHTMLを使用して

<html>
    <head>
        <title>Computed Style Example</title>
        <style type="text/css">
            div.special {
                background-color: red;
            }
        </style>
        <script type="text/javascript">
            function getBackgroundColor() {
                var oDiv = document.getElementById("div1");
                alert(document.defaultView.getComputedStyle(oDiv, null).backgroundColor);
            }
        </script>

    </head>
    <body>
        <div id="div1" class="special"></div>
        <input type="button" value="Get Background Color" onclick="getBackgroundColor()" />

    </body>
</html>
于 2013-01-21T19:00:27.257 に答える