CSS Psuedo :: Afterプロパティを操作する

Question

私はタイムラインのスクラバーで作業しています。ここでは、マーカーの後ろにスタイルが付けられた:: after要素が左右にドラッグされています。いくつのレイヤーが存在するかに応じて、行の高さを設定する必要がありますが、DOM要素にアクセスする方法はわかりません。私はいくつかの検索を行いましたが、体に要素を追加することによっていくつかの解決策がありましたが、単純にCSSを直接​​変更するのと比較すると、すぐに扱いにくくて複雑になりました。単純化のためにhttp://codepen.io/ajhalls/pen/QdgXBQ

が、私は左と右のスライダをドラッグする上での高さにアクセスしようとし、それを単純化：

は、私がここにデモを持っています。これはjQueryを使用していますが、私は確かにプレーンJSを使用する他のソリューションでも問題ありません。

$(".scrubber-icon").draggable({ 
    axis: 'x', 
    containment: "parent", 
    drag: function(event, ui) { 
     var scrubberValue = ($(".scrubber-icon").position().left-15); 
     $(".scrubber-icon").css("::after", "height", scrubberValue); 
     $("#text").html("position:" + scrubberValue); 

    } 

}); 

Answer 1

疑似要素はjavascriptで直接アクセスできません。これらはスタイルシートで定義されています。あなたはの方法であなたの疑似要素を変更することは、あなた自身のオンザフライスタイルシートを書くことです。今はすべての公平さで、私はすぐにこれをうまく動作させるかどうかを嘲笑しましたが、スタイルシートが頻繁に再評価されたときにブラウザに課税する方法はわかりません。

以下のスクリプトでは、jsPseudoという機能が追加されています。 nodeには疑似型と文字列（その属性内で値を返します - 以前にこの関数で設定した場合）またはobjectを渡します。ここで、キーは属性であり、値はまあまあです。値。これは、更新時に書き直すスタイルシートをページに追加します。これで

$(".scrubber-icon").css("::after", "height", scrubberValue); 

：

const jsPseudo = function(){ 
 
    var pseudos = {}, 
 
     count = 1, 
 
     style = document.createElement('style'); 
 
    document.body.appendChild(style); 
 
    return function(node, type, keyValues){ 
 
     var id = node.getAttribute('data-has-pseudo'); 
 
     if(!id){ 
 
      id = count++; 
 
      node.setAttribute('data-has-pseudo', count); 
 
     } 
 
     id = `[data-has-pseudo="${count}"]:${type}`; 
 
     pseudos[id] = pseudos[id] || {content:''}; 
 
     if(typeof keyValues === 'object'){ 
 
      for(let key in keyValues){ 
 
       pseudos[id][key] = keyValues[key]; 
 
      } 
 
      style.textContent = ''; 
 
      for(let key in pseudos){ 
 
       style.textContent += `${key}{` 
 
       for(attr in pseudos[key]){ 
 
        style.textContent += `${attr}:${pseudos[key][attr]};` 
 
       } 
 
       style.textContent += `};`; 
 
      } 
 
      return node; 
 
     } else if(typeof keyValues === 'string'){ 
 
      return pseudos[id][keyValues]; 
 
     } 
 
    } 
 
}(); 
 

 
jsPseudo(document.body, 'after', { 
 
    'content':'"Hello world!"' 
 
}); 
 

 
console.log(jsPseudo(document.body, 'after', 'content'));

あなたの特定のコードについては

、あなたは今、これを置き換えることができ

jsPseudo(this, "after", { height: scrubberValue + 'px'}) 

そして、それはあなたのためにスタイルシートを更新します。