入力タイプの範囲 - サムのエラー出力

突然、私のコードが機能しなくなりました。問題は、レンジ値を範囲の親指に出力したいということです。ここで入力タイプの範囲 - サムのエラー出力

は私のコードです：

<input id="slider1" type="range" min="5000" max="350000" step="1000" value="5000" name="beloeb" oninput="outputUpdate(value)" />

のJs：

function outputUpdate(vol) { 
function formatNumber (num) { 
return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1.") 
} 
document.styleSheets[0].addRule('#slider1::-webkit-slider-thumb::before','content: "'+formatNumber(vol)+' DKK";'); 
}

コンソールにクロムを使用する場合にはエラーです：

キャッチされないでSyntaxError：にCSSStyleSheet「on 'に追加ルール' を実行に失敗しました'：ルールを解析できませんでした'＃slider1 :: - webkit-slider-thumb :: before {content： "8.000 DKK"; } '。

出典

2016-04-12 Patrick Larsen

::-webkit-slider-thumbはnot a standard pseudo selector

この機能は非標準であり、標準化トラックにはないです。ウェブに直面している制作サイトでは使用しないでください。実装間に大きな非互換性があり、今後この動作が変わる可能性があります。

あなたはCSS Validatorの中にコードをチェックする場合は、のようなものがあります：

::-webkit-slider-thumb is an unknown vendor extended pseudo-element

だから、おそらくブラウザの新しいバージョンがプロパティをサポートして停止します。

現在、CSSでこれを達成するための標準的な方法はありません。しかし、divを使用して同じ結果を実装するいくつかの素晴らしいツールがあります/ http://refreshless.com/nouislider/

出典

2016-04-12 17:56:59

はに値を追加するための他の方法はあります範囲の親指？ –

@PatrickLarsen私は簡単にそれを行うための標準的なクロスブラウザのサポートされた方法を参照してください。この記事はhttps://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/で確認できますが、よくサポートされている機能ではありません。 –

Avraam's responseで述べたように、::webkit-slider-thumbスタイルは非標準であり、クロスブラウザの感覚のいずれかの種類では動作しませんように広がっています。結果として、styleSheet.addRule()関数は解析することができません。

<script> 
    function outputUpdate(vol) { 
    // Create a style block 
    var style = document.createElement('style'); 
    // Set an ID for style and type 
    style.id = 'slider-rule'; 
    style.type = 'text/css'; 
    // If the style doesn't exist in the DOM... 
    if(!document.getElementById(style.id)){ 
     // Resolve the head section of the document 
     var head = document.head || document.getElementsByTagName('head')[0]; 
     // Style content 
     var content = '#slider1::-webkit-slider-thumb::before{ content: "'+formatNumber(vol)+' DKK";}'; 
     if (style.styleSheet){ 
      style.styleSheet.cssText = content; 
     } else { 
      style.appendChild(document.createTextNode(content)); 
     } 
     // Append this tag to the <head> section 
     head.appendChild(style); 
    } 
    } 

    function formatNumber (num) { 
    return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1.") 
    } 
</script>

この：あなたはスタイルシートに直接追加することとは対照的に、1がすでに現在のページに存在しない場合は、ターゲットとしているスタイルが含まれている<style>ブロックを作成するにはJavascriptを使用して検討することもでき

明らかに、クロスブラウザの問題を解決しませんが、それが存在しない場合には、DOMに適切な<style>ブロックを追加します。

出典

2016-04-12 19:34:41

入力タイプの範囲 - サムのエラー出力

答えて

関連する問題