web-dev-qa-db-ja.com

計算スタイルを取得するにはどうすればよいですか？

誰でもスクリプトで私を助けてもらえますか..または価値を得る方法

height : 1196px;
width: 284px;

計算されたスタイルシート（webkit）から。 IEが異なる-通常どおり。iframeにアクセスできない（クロスドメイン）-高さ/幅が必要なだけです。

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

enter image description here

ソース

<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を使用して選択できません

javascripthtmlcsscross-domaincomputed-style
38
Piotr Kula

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

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

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

42
Lightness Races in Orbit

https://developer.mozilla.org/en-US/docs/Determining_the_dimensions_of_elements を見て

。clientWidthを使用して、pxの整数幅を取得します。

<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>
11
user649198

jQueryソリューション：

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

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

outerWidth / outerHeight の詳細については、api.jquery.comをご覧ください。

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

2
Sams

既に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>
0
KyleMit