2008年04月19日
document.bodyなブラウザ画面の内寸を取ろうと思って、jquery.dimensions.jsのinnerWidth()やHeight()でOKだろうと思っていたら、IEとFirefoxの動作が異なっていました。。。がっかり。
$(document.body).innerWidth()と$(document.body).innerHeight()を取ったのですが、ざっくりみたところ、Firefoxは表示されている領域、IEはスクロールしないと見えないページ全体を測っているようです。
しょうがなく、なんとなく修正してみたのでメモ。もう少しましな方法がありそうですけれど、とりあえず。WinのIE6,Opera9,Safari3.1,firefox2.0で、今のところ、なんとなくうまくいっているようにはみえる気がしますf^^;。＜ほんとか？
if(document.documentElement){
var bWidth=document.documentElement.clientWidth;
var bHeight=document.documentElement.clientHeight;
} else {
var bWidth = Math.min(
screen.avaiWidth ,
$(document.body).innerWidth()
);
var bHeight = Math.min(
screen.availHeight ,
$(document.body).innerHeight()
);
}
2007年02月03日
2006年05月16日
CSS 2.1 & 3 Support in KHTML 3.4
http://www.konqueror.org/css/
2006年04月20日
MozのgetBoxObjectForもIEのgetBoundingClientRect も対象ボックスの領域を得るのに使えますが、IEの場合、画面左上に2px,2px分よけいに勘定されるので少し違います。ちなみにたとえば、Yahoo! UIのDom 0.9.0の、YAHOO.util.Dom.getXY やRegionなどでは、これが修正されていませんのでIEだけ2pxずれたりしますから注意が必要です。
getBoundingClientRect
http://msdn.microsoft.com/workshop/author/dhtml/reference/methods/getboundingclientrect.asp
getBoxObjectFor
http://www.google.com/search?hl=en&lr=&q=document.getBoxObjectFor
if (el.getBoundingClientRect) box = el.getBoundingClientRect();//ie
if (document.getBoxObjectFor) box = document.getBoxObjectFor(el);//moz
*Yahoo! UIのgetX、getY、getXY、getRegionなどは内部でJscriptのgetBoundingClientRectメソッドを利用していますが、これは画面左上部に2px,2px分多くカウントします。したがって、厳密にクロスブラウザ化するには、IEの場合にその差を引く必要があります。
修正方法としては、IEの場合だけ結果の値から2px分引く方法もありますが、getBoundingClientRectは、ライブラリのdom.js内にあるYAHOO.util.Domクラスのメソッドthis.getXYの中で使われていますので、このメソッドのreturn文を 下記のように書き換えることで、内部でgetXYを利用しているメンバーすべての修正ができます。
//return [box.left + scrollLeft, box.top + scrollTop]; //こちらはオリジナルです
return [box.left + scrollLeft -2 , box.top + scrollTop -2];
2006年02月02日
インラインでスタイル指定しない場合の値は、たとえばoj.style.topなどでは取れない。という件について、いままでもいろいろなところで個別に話をしてきましたが、クロスブラウザ関数にしておきます。
たとえば、ページのどこかでtop:100pxなどと、明示的に指定していなければ、"auto"などが入っている可能性があることにも注意が必要です。
動的なスタイル値取得
getDynamicStyle(id,style)
http://jsgt.org/js/books/dhtml2/part3/cross/getdynamicstyle.htm
<html>
<head>
<style>
#test{
position:absolute;
top:100px;
left:100px
}
</style>
</head>
<body>
<div id="test">aaa</div>
<script>
alert("inlineのスタイル指定がなければ\ndocument.getElementById('test').style.topでは取得できません\n"+document.getElementById('test').style.top)
a = getDynamicStyle('test','top');
alert("でもgetDynamicStyle('test','top')で大丈夫\n"+a)
function getDynamicStyle(id,style){
if(!document.getElementById)return;
var node = document.getElementById(id);
if(node.currentStyle){
return node.currentStyle[style];
} else if(document.defaultView){
return document.defaultView.getComputedStyle(node,'').getPropertyValue(style);
} else {
return null
}
}
////
// getDynamicStyle(id,style)
//allow
// Win e6 f1 o8
// Mac e5 f1 o8 s2
//deny
// Mac s1.25
// Linux k3
//
//@see http://www.mozilla-japan.org/docs/dom/domref/examples7.html
//@see http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/objects/currentstyle.asp
</script>
</body>
</html>
高橋 ( 2006年02月02日 22:31 )
はい、どうぞ〜。ライセンスはパブリックドメインです。改造、商用利用も切り張りも自由自在、連絡不要です。って、あえていうほどのコードでもないですねf^^;;
Mitsuhal ( 2006年02月03日 04:44 )
return node.currentStyle.top;
↓
return node.currentStyle[style];
ですよね？
高橋 ( 2006年02月03日 15:52 )
Mitsuhal さんありがとうございます。
直しました。
高橋 ( 2006年02月03日 15:56 )
Safari1はKonquerrorと同じバグっぽいです。document.defaultView.getComputedStyleまでは存在しているので、なにかの呪文で解けるかもしれないです。ちなみに(node,null)では駄目なことだけは確認しましたが、、、。
高橋 ( 2006年02月03日 17:45 )
インテルMacになるついでに、デフォルトもFirefoxしてくれないかな、、、動作確認が楽になる、、、とも限らないかなf^^??
古籏一浩 ( 2006年02月04日 13:25 )
Mac+Safari 2, Firefox 1.5でちゃんと動きました。
う〜む、こういうのは便利ですね〜。
使わせてもらってもいいですか？
古籏一浩 ( 2006年02月04日 13:26 )
どうもありがとうございますです。
Safari 1でも動くとグッドなんですけどね〜。
何か策があるかなあ。
もうG5のHDDがいっぱいで身動きが取れないf(^^;
HDD合計は2TB以上あるのに、残りが14.04GB...
古籏一浩 ( 2006年02月04日 13:27 )
for...inで中身を覗いてみると何かヒントとかないかなあ。
ただ、DOM操作もSafariは思わぬ落とし穴があったりするので何とも...
#頑張ってHDDの空きを33GBまで増やしましたf(^^;
福田 ( 2006年06月17日 18:03 )
はじめまして。
先ほどから座標の位置が取得できずに
５、６時間悩んでいたのですが、
おかげ様で解決しました。ありがとうございます。
(←clickで入力欄open)
2006年01月23日
IE の getAttribute / setAttribute
http://nanto.asablo.jp/blog/2005/10/29/123294#tb192137
// NG
element.getAttribute("class");
element.setAttribute("style", "background-color: #fff; color: #000;");
element.setAttribute("onclick", "clickHandler(event);");
// OK
element.getAttribute("className");
element.style.cssText = "background-color: #fff; color: #000;";
element.setAttribute("onclick", new Function("clickHandler(event);"));
#そういえば、Operaでoj.cssTextがだめなんですよね、、、うう。
@関連 【クロスブラウザ】class属性値をgetAttributeで取るときは、、、
http://jsgt.org/mt/archives/01/000788.html
2006年01月18日
class属性値をgetAttributeで取るときは、下記に注意。すっかり忘れてました(^^;
oj.getAttribute('class') ←FireFox,Opera,Safari
oj.getAttribute('className') ←IE
クロスブラウザな書き方は下記でOK
oj.getAttribute('class')||oj.getAttribute('className')
例
if(oj.getAttribute('class')||oj.getAttribute('className')=='xxx'){ ... }
if((oj.getAttribute('class')||oj.getAttribute('className'))=='xxx'){ ... }
nagi ( 2006年01月18日 10:24 )
oda さんの仰るとおり、 == の方が || より優先されますね。
var attr = oj.getAttribute('class')||oj.getAttribute('className')=='xxx';
とすると、
Gecko では、 attr には属性値が入り、
Trident では、属性値が 'xxx' と等しいか評価した結果（boolean）が入るようです。
意図通りの分岐を書くなら、
if ( ( oj.getAttribute('class')||oj.getAttribute('className') ) == 'xxx' ){ ... }
ですかね。
高橋 ( 2006年01月18日 12:41 )
おぉ、なんと素早いつっこみありがとうございます(^^;;
直しました。
(←clickで入力欄open)
2005年11月11日
XMLデータアイランドをすべてのブラウザで動作させる方法
Nigel McFarlane
http://japan.internet.com/developer/20051108/25.html
IE 4.0やNetscape 4.xといった古びたブラウザが姿を消し、MozillaとFirefoxが台頭してきた現在、DHTMLは以前にも増して強力で、汎用性の高い技術に育ちつつあります。IEに拘束されてきたアプリケーションをDHTMLで解き放ってください。
この方亡くなられたんですね、、、。敬意を込めて黙祷。
2005年11月09日
2005年11月07日
IE の getAttribute / setAttribute
http://nanto.asablo.jp/blog/2005/10/29/123294#c132376
IE のgetAttribute / setAttribute の振る舞いが、Win、Macともに微妙にDOM Level 1 と異なるということについてのお話。
2005年11月03日
ページ全体の読み込み完了まで少々お待ちください...
【最近の記事】
ページ全体の読み込み完了まで少々お待ちください...
![[Valid RSS]](http://jsgt.org/mt/archives/01/valid-rss.png "Validate my RSS feed"){kind=small}
