43

誰かがスクリプトで私を助けてくれますか..またはの値を取得する方法

height : 1196px;
width: 284px;

計算されたスタイルシート（webkit）から。IEが違うことは知っています-いつものように。iframe（クロスドメイン）にアクセスできません—必要なのは高さ/幅だけです。

必要なもののスクリーンショット（赤で囲んだ部分）。これらのプロパティにアクセスするにはどうすればよいですか？

ここに画像の説明を入力してください

ソース

<iframe id="frameId" src="anotherdomain\brsstart.htm">
 <html id="brshtml" xmlns="http://www.w3.org/1999/xhtml">   
    \--I WANT THIS ELEMENTS COMPUTED BROWSER CSS HEIGHT/WIDTH

<head>
<title>Untitled Page</title>
</head>

<body>
 BLA BLA BLA STUFF

</body>

</html>
   \--- $('#frameId').context.lastChild.currentStyle 
        *This gets the actual original style set on the other domain which is "auto"
        *Now how to getComputed Style?


</iframe>

私が得た最も近いものはこれです

$('#frameId').context.lastChild.currentStyle

これにより、「自動」であるHTML要素の実際のスタイルがわかります。これは、iframedドキュメントに設定されているものと同じです。

すべてのブラウザがスクロールバーの計算と要素値の検査に使用する計算スタイルを取得するにはどうすればよいですか？

Tomalaksの回答を使用して、Webkit用のこの素敵なスクリプトを作成しました

window.getComputedStyle(document.getElementById("frameId"), null).getPropertyValue("height")

また

window.getComputedStyle(document.getElementById("frameId"), null).getPropertyCSSValue("height").cssText

結果150px

と同じ

$('#frameId').height();

そこで、頭に「brshtml」のIDを追加してもらいました。要素を簡単に選択できるようになるかもしれません。Webkitの検査でhtml＃brshtmlが表示されますが、を使用して選択することはできませんgetelementbyid

4

4 に答える 4

48

この回答を参照してください。

これはjQueryではありませんが、Firefox、Opera、Safariでは window.getComputedStyle(element)要素の計算されたスタイルを取得するために使用でき、IEではを使用できます element.currentStyle。返されるオブジェクトはそれぞれの場合で異なり、Javascriptを使用して作成された要素とスタイルのどちらがうまく機能するかはわかりませんが、おそらくそれらは役立つでしょう。

iframe私には約150pxの高さに見えます。そのコンテンツの高さが1196pxであり（実際、スクリーンショットによると、ノードを探索しているように見えますhtml）、それを取得したい場合は、iframeのドキュメントのDOMに移動し、上記の手法を適用する必要があります。

于 2011-05-06T11:43:04.497 に答える
12

https://developer.mozilla.org/en-US/docs/Determining_the_dimensions_of_elementsを見てください

.clientWidthを使用して、ピクセル単位の整数幅を取得します。

<div id="mydiv" style="border:1px solid red;">This is DIV contents.</div>
<button onclick="alert(
document.getElementById('mydiv').clientWidth);">
   Click me to see DIV width in px
</button>
于 2012-12-17T23:06:31.380 に答える
3

jQueryソリューション：

$(".element").outerWidth( true ); 
//A Boolean indicating whether to include the element's 
//margin in the calculation.

説明：パディングや境界線など、一致した要素のセットの最初の要素について現在計算されている幅を取得します。値の整数（「px」なし）表現を返します。空の要素セットで呼び出された場合はnullを返します。

api.jquery.comでouterWidth / outerHeightの詳細を読むことができます

注：選択した要素は「display：none」であってはなりません（この場合、内側の幅を除いた合計幅としてパディングのみが取得されます）

于 2014-01-13T09:34:36.117 に答える
0

すでにjQueryを使用している場合は、を使用しCSSて、任意のブラウザーの任意のスタイルプロパティの計算された/currentを取得できます。

$("#el").css("display")


var $el = $("#el");

console.log(".css('display'): " + $el.css("display"))

var el = document.getElementById("el");
el.currentStyle = el.currentStyle || el.style

console.log("style.display: " + el.style.display)
console.log("currentStyle.display: " + el.currentStyle.display)
console.log("window.getComputedStyle: " + window.getComputedStyle(el).display)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="el">element</div>

于 2018-11-04T01:26:48.507 に答える