5

独自の要素を定義し、JavaScript または JQuery を使用してそれらを選択することが信頼できるかどうかに興味があります。

「カスタム要素は有効な HTML5 ですか?」という質問に遭遇しました。、しかし、私は中途半端な仕様にも、独自の要素を定義する正式な方法にも興味がありません。

たとえば、使用するかどうかを知りたいだけです

<orange-juice />

私のドキュメントでそれを選択しようとします（CSS経由、jQuery経由）

orange-juice.fresh

それはブラウザ間で動作しますか (そしてもちろん、それを明示的に許可する HTML5 仕様の一部に支えられているのでしょうか?)

編集: IE9+ および主要なデスクトップ ブラウザーのようなクロスブラウザー。

編集: CSS の言及と同様に、オレンジ ジュースの例は少し誤解を招く可能性があります。独自のセマンティック要素を作成したり、実際にコンテンツのスタイルを設定したりしたくありません。スクリプトによって解釈されるメタ情報を添付したいと考えています。データ属性を持つ空の div も同様に可能性がありますが、それ<my-meta-element />はより良い選択だと思います<div id="i-am-just-an-innocent-fill-in-carrying-some-information-which-does-not-have-anything-to-do-with-me-being-a-generic-block-displayed-element"></div>

4

3 に答える 3

2

要素にデータを保存するだけの場合は、カスタム属性を使用できます (ただし、期待する XML 型の構文はありません)。

次のようなもの：

<div id="orange" data-fresh="true"></div>

次に、JS でこれを選択できます。

var orange, fresh;
orange = document.getElementById("orange");
fresh = orange.getAttribute("fresh");
于 2013-10-02T13:20:45.857 に答える
2

HTML5 はすべての要素を「有効」としてサポートしているわけではないため、一部のブラウザーでは機能しません。カスタムタグはおろか、WAI-ARIA でさえ有効になったのはそれほど前のことではありません。ただし、これはそれらを使用できないという意味ではありません。この質問は役に立ちます: HTML5 で独自の html タグを作成する方法はありますか?

于 2013-10-02T13:18:57.000 に答える
1

現在、開発者が独自の要素を作成できるようにするための仕様が作成されています。この新機能は「Web コンポーネント」と呼ばれ、これを書いている時点では、デフォルトではどのブラウザーでもサポートされていません。

したがって、それは直接的な実用的な答えではないかもしれませんが、前方互換性を維持する予定がある場合は、カスタム要素の形式化を開始することをお勧めします。

独自の要素を定義する限り、最新のブラウザーは認識できない要素を無視しますが、CSSdisplayスタイルをカスタム要素に追加して、要素が何らかの方法でレンダリングされることをブラウザーに伝えることができます。これは、古いブラウザで新しい要素を使用できるようにするための意図的なものです。

document.createElement('custom-element-name')古いバージョンの IE をサポートするには、IE が要素を認識する前に呼び出す必要があります。

基本的に、<example>要素を作成するには、次のようにする必要があります。

<!doctype html>
<html>
<head>
    <title>example element</title>
    <script>document.createElement('example');</script>
    <style>
        example {
            display: block;
        }
    </style>
</head>
<body>
    <example></example>
</body>
</html>
于 2013-10-02T13:22:48.930 に答える