removeAttribute()メソッドで削除できないスタイル

スタイル属性を思ったように削除できなくて困っています。

<script language="JavaScript">

function a() {
document.getElementsByTagName("div")[0].style.removeAttribute('color');
}

function b() {
document.getElementsByTagName("div")[0].style.removeAttribute('border');
}

</script>

<div style="color: #ff0000; border: 5pt solid #0000ff;">要素</div>
<input type="button" value="削除1" onClick="a()">
<input type="button" value="削除2" onClick="b()">

削除1を押すと「要素」のcolor属性が削除されますが、削除2を押してもborder属性が削除されません。removeAttribute()メソッドは動作が不安定なんですか？

No.2 ベストアンサー 回答者： BLUEPIXY 回答日時： 2005/07/02 13:33

borderは、単なるアトリビュートではなくて、複合オブジェクトなので、できないということだと思います。

私も、＃１様の様にすることをおすすめします。

この回答へのお礼

度々ありがとうございます。複合オブジェクトってどのようなものでしょうか。removeAttribute(x)は()内の属性によって、できたりできなかったりするんです。removeAttribute("lineHeight")でもダメでした。lineHeightも複合オブジェクトなんですかね？

お礼日時：2005/07/02 17:37

No.3 回答者： steel_gray 回答日時： 2005/07/04 10:54

> 複合オブジェクトってどのようなものでしょうか。

CSS的には簡略化プロパティっていったほうが一般的だと思いますが、とにかく、一つのプロパティに値を並べて複数の指定がされているという事だと思います。

borderの場合、
border-top-width、border-top-style、order-top-color
の三つがborder-topにまとめられ、
またborder-top、border-left、border-right、border-bottomの４つがborderにまとめられているわけです。
（参考URL）

試してみると
'borderBottomStyle'や'borderLeftColor'なんかは動作しました。
試してませんがmarginやpaddingもmarginTopやpaddingLeftのように個別に指定しないと動かないんじゃないかと予想できます。

ちなみにlineHeighは特に問題なく動作しました。

参考URL：http://www.htmq.com/style/index.shtml#bor

この回答へのお礼

すみません、たしかにlineHeightは動作しました。動かないのはmarginやborderのようにまとめて設定するものだけでした。複合オブジェクトの意味を教えていただき、ありがとうございます。

お礼日時：2005/07/04 21:58

No.1 回答者： steel_gray 回答日時： 2005/07/02 12:35

IE固有のstyleのremoveAttribute()メソッドについてはわかりません。

特に事情がなければIE以外でも動くし
document.getElementsByTagName("div")[0].style.border = '';
の方が妥当だと思うんですがどうでしょうか？

この回答へのお礼

removeAttribute(x)だと()内に任意のプロパティを入れられるので便利だと思ったんですが、かなり特殊なメソッドのようですね。他の方法を考えることにします。

お礼日時：2005/07/02 17:34