スクリプトでpositionプロパティを絶対配置から通常配置に切り替えた場合、切り替え後もleft, top, right, bottomの各プロパティの指定値が反映される。
- Category: Opera, Windows, ver.9 Under
- Tag: position
例示
<script type="text/javascript">
<!--
function getstyl(id1) {
obj = document.getElementById(id1);
ipt = document.getElementById('in1');
ipt.setAttribute('value', obj.style.position);
ipt = document.getElementById('in2');
ipt.setAttribute('value', obj.style.left);
}
function chgpos(id1) {
obj = document.getElementById(id1);
if(obj.style.position == 'absolute') {
obj.style.position = 'static';
} else {
obj.style.position = 'absolute';
}
getstyl('d1');
}
function chglef(id1) {
obj = document.getElementById(id1);
if(navigator.userAgent.match(/Opera/i)) {
if(obj.style.left == '0') { //Opera6ではpx単位が前提
obj.style.left = '100';
} else {
obj.style.left = '0';
}
} else {
if(obj.style.left == '0px') { //IEやMozはこちら
obj.style.left = '100px';
} else {
obj.style.left = '0px';
}
}
getstyl('d1');
}
// -->
</script>
<div id="d1" style="position:absolute; left:0px; width:2em; height:2em; background:red;">A</div>
<form action="./">
<input type="text" value="" id="in1" />
<input type="button" value="position: absolute ←→ static;" onclick="chgpos('d1')" /><br />
<input type="text" value="" id="in2" /><input type="button" value="left: 0px; ←→ 100px;" onclick="chglef('d1')" /><br />
</form>
上のボタンでpositionプロパティの切り替え、下のボタンでleftプロパティの切り替えを行います。また、各ボタンの左にあるボックスにプロパティの状態が表示されています。ボタンを押してleftプロパティがどのように反映されるかを確認してください。
補足
Opera6では、JavaScriptからstyleオブジェクトのpositionに関するプロパティの値変更に対応していないようです(正確には、値は変更できても表示に反映されない)。
参考:http://www.opera.com/docs/specs/js/
修正状況
Opera6.05では、positionの切り替えに対応していないようです。Opera7.0ではpositionプロパティをDOMを用いて変更できるようになりました。


