javascript - javascript または jquery を使用して :before psedo-element 属性を変更する方法は?

Question

疑似要素の「左」属性を変更しようとしています:before。JavaScript または jQuery を使用して他の要素を変更しても問題はありませんが、:beforeタブ内の要素を変更しようとするとスタックするようです。

例として、以下の要素のleft属性をに設定できないようです。:before200

私のCSS：

#buttonBox {
    position: absolute;
    width:150px;
    z-index:10;
    left:298px;
    top: 130px;
}

#buttonBox:before {
    position: absolute;
    content: "";
    top: -8px;
    left: 80px;
    margin-left: -8px;  
    border-bottom: 8px solid #ddd;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;        
    border-top: 0;
    border-bottom-color: #1e2227; 
}

JavaScript の場合:

document.getElementById("#buttonBox:before")

yield null、それを設定することを不可能にします。

jQuery:

$("#buttonBox:before").offset({top: -8, left: 200});

同様に、left属性の設定に応答しません。

疑似要素の属性を変更する方法に欠けているものはありますか? 私はこれをグーグルで検索する運がありません。

Answer 1

JQueryで疑似要素を変更することはできません。代わりに、クラスを使用してCSS属性を操作してください。例：

#buttonBox.active:before {
   top: -8px;        
   left: 200px;
}

この.activeクラスは、必要に応じてJavascriptを介して適用されます。

Answer 2

JSを介して変更することはできますが、おそらくすべきではないほど面倒です。:before:after

これを行うには、同一のセレクターを使用して、新しいスタイルを含む Web ページの新しいstyle要素を手動で追加する必要があります。head

$('<style type="text/css">#buttonBox:before { left: 200px; top: -8px; }</style>').appendTo('head');

疑似要素は実際にはDOM 要素ではありません (したがって「疑似」)。それらは、スタイルシートの追加/削除以外に JavaScript がアクセスできる方法では存在しません。

Answer 3

jQuery で prev() 関数を使用できますか?

http://api.jquery.com/prev/