ホームページ > 記事 > ウェブフロントエンド > 疑似要素の前後にjsエフェクトを設定する方法_javascriptスキル

疑似要素の前後にjsエフェクトを設定する方法_javascriptスキル

WBOYオリジナル: 2016-05-16 15:27:471546ブラウズ

カスケードスタイルシート (CSS) の主な目的は、HTML 要素にスタイルを追加することですが、場合によっては、ドキュメントに要素を追加することが冗長であるか、不可能です。実際、CSS には、ドキュメント自体を乱すことなく要素を追加できる機能があり、それが「疑似要素」です。

前の単語

疑似要素の前後に js エフェクトを直接設定することはできません

例

ここで、(ID がボックス、コンテンツが「I am test content」の div を持つ div) に (:before content is "prefix"、color is red 疑似クラス) を追加する必要があります

<!DOCTYPE html>
<html lang="en">
<head>
　　<meta charset="UTF-8">
　　<title>Document</title>
</head>
<body>
　　<div id="box">我是测试内容</div>　　<script>　　　　var oBox = document.getElementById('box');　　</script>
</body>
</html>

解決策

【方法1】CSSスタイルを動的に埋め込む

IE8 ブラウザは、c9ccee2e6ea535a969eb3f532ad9fe89 タグを特別なノードとして扱い、その子ノードへのアクセスを許可しません。 IE10 - ブラウザーは、styleSheet.cssText プロパティを使用したスタイルの設定をサポートしています。対応している書き込み方法は以下のとおりです。

<script>
function loadStyleString(css){
  var style = document.createElement("style");
  style.type = "text/css";
  try{
    style.appendChild(document.createTextNode(css));
  }catch(ex){
    style.styleSheet.cssText = css;
  }
  var head = document.getElementsByTagName('head')[0];
  head.appendChild(style);
}
loadStyleString("#box:before{content:'前缀';color: red;}");
<script>

[方法 2] 独自の疑似クラスを使用してクラス名を追加します

<style>
  .change:before{content: "前缀";color: red;}
</style> 
<script>
  oBox.className = 'change';
</script>

【欠点】このメソッドでは、擬似要素
内の content 属性の値を制御できません。

[方法 3] setAttribute を使用してカスタマイズされたコンテンツを実装する

<style>
　　.change:before{content: attr(data-beforeData);color: red;}
</style> 
<script>
  oBox.setAttribute('data-beforeData','前缀');
</script>

[注] このメソッドは setAttribute でのみ実装できます。テスト後、データセットメソッドは無効になります。

【方法4】スタイルシートを追加する

Firefox ブラウザは addRule() メソッドをサポートしていません。また、IE8 ブラウザは insertRule() メソッドをサポートしていません。対応している書き込み方法は以下のとおりです。

<script>
  function insertRule(sheet,ruleKey,ruleValue,index){
  　　return sheet.insertRule &#63; sheet.insertRule(ruleKey+ '{' + ruleValue + '}',index) : sheet.addRule(ruleKey,ruleValue,index);
　　} 
  insertRule(document.styleSheets[0],'#box:before','content:"前缀";color: red;',0)  
</script>

[欠点] このメソッドには、内部 c9ccee2e6ea535a969eb3f532ad9fe89 を使用するか、2cdf5bf648cf2f33323966d7f58a7f3f を使用して外部スタイルをリンクする必要があります。それ以外の場合、document.styleSheets は空のリストになり、エラーが発生します。報告しました

【方法5】スタイルシートを変更する

まずメソッド 4 を使用して空のスタイルシートを追加し、次に新しく生成された