xml+xslt変換後のstyle操作

締切済

質問者：noname#39970
質問日時：2007/04/20 16:54
回答数：5件

環境
　Firefox 2.0.0.3
内容
　xmlをxsltでxhtmlに変換して表示させた場合style操作ができない

以下のような　エレメントを挿入するjavascriptを記述。
(ヘルプ表示用に良く見られる手法)

//-------------------------
MyObj = document.createElement("ins");
MyObj.style.position = "absolute";
MyObj.style.top = "-10000px";
MyObj.style.width = "auto";
document.getElementsByTagName("body")[0].appendChild(MyObj);
//-------------------------

通常のhtmlやxhtmlから使う場合には問題ないのにxslt変換後のdocumentでstyle操作をしようとすると「MyObj.style has no properties」と言われ操作できなかった。

この状況(xslt変換後)でstyleを操作するにはどうしたら良いですか？

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (5件)

最新から表示
回答順に表示

No.1

回答者： himajin100000
回答日時：2007/04/20 20:01

Minefield(Fx 3.0a4pre)で再現しない。

(かなり余計な記述が入っているが
XMLの記述って結構，名前空間やXML宣言を書くのが面倒なので手元のサンプルを利用したため)
================hoge.xml====================
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="hoge.xsl"?>
<info>
<group>
<page fileId="pteach">
<title>教員一覧</title>
<teacher>
<name>山田信夫</name>
<subject>英語</subject>
</teacher>
<teacher>
<name>木田淳</name>
<subject>数学</subject>
</teacher>
<teacher>
<name>島義博</name>
<subject>英語</subject>
</teacher>
<teacher>
<name>山口正</name>
<subject>倫理</subject>
</teacher>
<teacher>
<name>広山進</name>
<subject>情報</subject>
</teacher>
<teacher>
<name>桃山博美</name>
<subject>現代文</subject>
</teacher>
<teacher>
<name>春日芳樹</name>
<subject>音楽</subject>
</teacher>
</page>
</group>
</info>
=====================hoge.xsl===================
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns="http://www.w3.org/1999/xhtml">
<xsl:param name="id" />
<xsl:output
method="html"
standalone="yes"
encoding="UTF-8"
media-type="text/html"
omit-xml-declaration="yes"
doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN"
doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
indent="yes"
/>
<xsl:template match="/">
<html>
<head>
<title>KDS</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="/css/style.css" type="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript">

function hoge(){

MyObj = document.createElement("ins");
MyObj.style.position = "absolute";
/*MyObj.style.top = "-10000px"; */
MyObj.style.width = "auto";
MyObj.textContent="挿入された文字列"
document.getElementsByTagName("body")[0].appendChild(MyObj);

}
</script>
</head>
<body onload="hoge();">
<xsl:apply-templates select="info/group/page[@fileId='pteach']" mode="main"/>
</body>
</html>
</xsl:template>

<xsl:template match="info/group/page" mode="main">
<table >
<caption><xsl:value-of select="title"/></caption>
<xsl:apply-templates select="teacher[position() mod 3 = 1]"/>
</table>
</xsl:template>
<xsl:template match="teacher">
<tr>
<td><xsl:value-of select="name"/>:<xsl:value-of select="subject"/></td>
<td><xsl:value-of select="following-sibling::teacher[1]/name"/>:<xsl:value-of select="following-sibling::teacher[1]/subject"/></td>
<td><xsl:value-of select="following-sibling::teacher[2]/name"/>:<xsl:value-of select="following-sibling::teacher[2]/subject"/></td>
</tr>
</xsl:template>

</xsl:stylesheet>
===============出力されたhtml(eXtyleを用いた)=================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio … xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>KDS</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" href="/css/style.css" type="text/css"/>
<meta http-equiv="Content-Script-Type" content="text/javascript"/>
<script type="text/javascript">

function hoge(){

MyObj = document.createElement("ins");
MyObj.style.position = "absolute";
/*MyObj.style.top = "-10000px"; */
MyObj.style.width = "auto";
MyObj.textContent="挿入された文字列"
document.getElementsByTagName("body")[0].appendChild(MyObj);

}
</script>
</head>
<body onload="hoge();">
<table>
<caption>教員一覧</caption>
<tr>
<td>山田信夫:英語</td>
<td>木田淳:数学</td>
<td>島義博:英語</td>
</tr>
<tr>
<td>山口正:倫理</td>
<td>広山進:情報</td>
<td>桃山博美:現代文</td>
</tr>
<tr>
<td>春日芳樹:音楽</td>
<td>:</td>
<td>:</td>
</tr>
</table>
</body>
</html>
===================結果===========================
.xmlファイルを直接Minefieldに読み込ませたときも，
.htmlファイルを読み込ませたときも，「挿入された文字列」という文字列が表示された。

この回答への補足

サンプル付きでありがとうございます。
このサンプルと表記で動作するしないの境界線を調査したところ

>method="html"
>media-type="text/html"
自分のは
method="xml"
media-type="application/xhtml+xml"

これを
method="html"
に変更するだけで動作するようになりました。
しかし method="html" は出力が(versionを省略すると) html4.0 である筈なので出力表記としておかしい気がします。
「xhtmlとして出力」であるときも method="html" で良いとする資料を探すも見あたらず納得行かないので資料があるようなら提示をお願いします。

単にブラウザの動作モードとしても method="html" でなければならないのなら別ですが・・・

補足日時：2007/04/21 01:15

通報する

- 0
- 件

通報する

No.2

回答者： himajin100000
回答日時：2007/04/20 20:09

補足。

あまり考慮しなかったが本来は
createElementNSを利用すべきだったかもしれない

http://javascript.g.hatena.ne.jp/keyword/createE …

これよりFx 2.0.0.3をインストールして検証する予定だ。
同じサンプルをFx 2.0.0.3で動作させてみて動かなければFx 2.0.0.3とFx 3.0a4preの間に加えられた修正に関連する問題。そうでなければ、そちらのソースコードの問題。

- 0
- 件

通報する

この回答へのお礼

<html xmlns="http://www.w3.org/1999/xhtml">

とすれば特に必要ないと思われる。

通報する

お礼日時：2007/04/21 01:27

No.3

回答者： himajin100000
回答日時：2007/04/20 20:21

試したところ，Fx2.0.0.3でも正常に動作した。

エラーコンソールに文字列はなし。

ちなみにMinefield,Fx 2.0.0.3共に，hoge関数内に入れなかった場合は以下のエラーが出た。

エラー: document.getElementsByTagName("body")[0] has no properties
ソースファイル: file:///D:/Oshiete_Goo/Q2936141/hogeresult.html
行: 14

>style操作をしようとすると
こういう時、俺なら「呼び出しているオブジェクトのクラスや型」をalert関数などを用いて調べてみるけどね。nullとかundefinedになってないかどうか。

この回答への補足

勿論やってみたけれど"undefined"
どうして値が取れないのか
どうやったら値を取れるのか
と考えて、とりあえず無理矢理設定してみたりとかやったけれど解決できず・・・

No1の通り、今のところ判っているのは出力が"html"ではなく"xml"であったため駆動しないという事だけ。。。
xhtmlはFirefox的にはhtmlとして扱わなければ動作しないのかもしれない・・・
書類としてはxmlの筈なのに・・・

補足日時：2007/04/21 01:27

通報する

- 0
- 件

通報する

No.4

回答者： himajin100000
回答日時：2007/04/21 04:55

ごめんなさい。

再現はしました・・・がやっぱりわかりません。
明日気が向いたときに色々考えてみます。(明日で結論が出せる保証はできない)

>しかし method="html" は出力が(versionを省略すると) html4.0 である筈なので出力表記としておかしい気がします。

気づかなかったorz...俺の痛恨のミスですね。

====================以下ほぼ愚痴・思考経路です====================
http://www.infoteria.com/jp/contents/xml-data/RE …

>html 出力メソッドは、エレメントの展開された名前が null のネームスペース URI を持つ場合を除き、
xml 出力メソッドと異なる方法でエレメントを出力すべきではない。

>html 出力メソッドは空エレメントのエンドタグを出力すべきではない。
HTML 4.0 の空エレメントは、area、base、basefont、 br、col、frame、 hr、img、input、 isindex、link、meta、
および param である。
たとえば、スタイルシートに <br/> または <br></br> と記述されたエレメントは、<br> と出力される。

とは書いてあるんですけど。名前空間を持つXHTMLの空要素はどっちだよっ！(笑)
記述からしてHTML 4.0以外も(というかぶっちゃけXHTML 1.0)想定してそうに思えるんですけどね
#HTMLは名前空間の話がそもそも無いはず(HTML 4.0はそもそも名前空間nullとして解釈されるべきなの？)

>勿論やってみたけれど"undefined"
念のため。代入後，
alert(MyObj.style); /* undefinedで当然 */
ではなく
alert(MyObj);

Minefieldの場合，
method="xml"の時，[object Element]
method="html"の時，[object HTMLInsElement]
と表示されました。

Opera 9.20の場合，共に
[object HTMLModElement]
と出力されています(注意:XMLであっても[object Node]とか[object Element]ではない。)

参考 http://www.w3.org/TR/2000/CR-DOM-Level-2-2000051 …

IE 7の場合[object]

XMLDOMの場合ないことを示す記述を探そうとすればすると

http://www.w3.org/TR/DOM-Level-2-Style/css.html# …

Inline style information attached to elements is exposed through the style attribute.
This represents the contents of the STYLE attribute for HTML elements
(【or elements in other schemas or DTDs which use the STYLE attribute in the same way】).

とあるので対応していてほしいというか・・・うん。
ただ、その先読むと

The expectation is that an instance of
the ElementCSSInlineStyle interface can be obtained by using 【binding-specific casting methods】
on an instance of the Element interface when the element supports inline CSS style informations.

っていう記述があって、キャストしろということなのかなあと。

http://bakera.jp/hatomaru.aspx/htmlbbs/article/1 …
http://bakera.jp/hatomaru.aspx/htmlbbs/article/1 …

ちょっと混乱してます。quadsさんあたりが登場してきてくれると個人的には嬉しかったり。

- 0
- 件

通報する

この回答へのお礼

状況からするとやはり method="xml" では扱いがhtmlではないのでstyleを保持していない感じが　　　。

実際 getProperties (functionでない言われる)で取れないだとか
setAttributeで"style"として書き込んでもそれはstyleではなくstyleという名前をもった単なる属性値になってしまうだとか・・・
そんな状況です。。。

ただ、javascript的なstyle操作ではなくDOM的なstyle操作や作成ができればあるいは…とも思いますがそれが件の記述(DOM翻訳)の辺りの文章なのかも…

通報する

お礼日時：2007/04/21 18:34

No.5

回答者： himajin100000
回答日時：2007/04/21 05:42

判明しました。

><html xmlns="http://www.w3.org/1999/xhtml">
とすれば特に必要ないと思われる。

【やっぱりcreateElementNSを使用しないと駄目です。】
HTMLと同等に考えられているのはXHTML 1.0であり、
HTMLのins要素互換とされているのは，
XHTML 1.0に登場する，
http://www.w3.org/1999/xhtml名前空間のins要素。
「XHTML1.0の」ins要素は「名前空間の無い」ins要素とは全く異なるもの。(型変換できません。良く考えたらできるわけがない)
createElement関数が返すのは「名前空間のない」ins要素。

#ちなみに「名前空間がないins要素」と「名前空間はあるけど，名前空間接頭辞の無いins要素」も全然別物。
(そのため、これらの回答のサンプルソースの元になった
http://oshiete1.goo.ne.jp/qa2935658.html
の質問ではtable要素がxmlns=""という属性を持っている)

#method="html"の場合名前空間がつこうがつくまいが関係ないみたい。

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns="http://www.w3.org/1999/xhtml">
<xsl:param name="id" />
<xsl:output
method="xml"
standalone="yes"
encoding="UTF-8"
media-type="text/xml"
omit-xml-declaration="yes"
doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN"
doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
indent="yes"
/>
<xsl:template match="/">
<html>
<head>
<title>KDS</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="/css/style.css" type="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript">

function hoge(){

var MyObj;
MyObj = document.createElementNS("http://www.w3.org/1999/xhtml","ins");
YourObj = document.createElement("ins");
alert(MyObj);
alert(YourObj);
MyObj.style.position = "absolute";

MyObj.style.width = "auto";
MyObj.textContent="挿入された文字列";

document.getElementsByTagName("body")[0].appendChild(MyObj);

};
</script>
</head>
<body onload="hoge();">
<xsl:apply-templates select="info/group/page[@fileId='pteach']" mode="main"/>
</body>
</html>
</xsl:template>

<xsl:template match="info/group/page" mode="main">
<table >
<caption><xsl:value-of select="title"/></caption>
<xsl:apply-templates select="teacher[position() mod 3 = 1]"/>
</table>
</xsl:template>
<xsl:template match="teacher">
<tr>
<td><xsl:value-of select="name"/>:<xsl:value-of select="subject"/></td>
<td><xsl:value-of select="following-sibling::teacher[1]/name"/>:<xsl:value-of select="following-sibling::teacher[1]/subject"/></td>
<td><xsl:value-of select="following-sibling::teacher[2]/name"/>:<xsl:value-of select="following-sibling::teacher[2]/subject"/></td>
</tr>
</xsl:template>

</xsl:stylesheet>