首頁猿問更改值時(shí)，HTML5 范圍無法使用...

更改值時(shí)，HTML5 范圍無法使用 javascript 將線性漸變設(shè)置為背景。

JavaScript

吃雞游戲 2023-08-24 15:34:30

我創(chuàng)建了一個(gè)自定義線性漸變作為 HTML Range 的背景。當(dāng)我嘗試更改范圍值時(shí)，JavaScript 代碼會更改背景線性寬度。正如您在代碼片段中看到的，它在開頭設(shè)置了顏色。但是更改值后，它會在該樣式中添加未知的中心（請檢查日志）類，并且無法正確設(shè)置顏色。如何擺脫這個(gè)中心階級?；蛘哂惺裁捶椒梢宰龅竭@一點(diǎn)而不用這種方式？（請檢查以下片段。）任何幫助將不勝感激document.getElementById("sliderPrice").oninput = function() { $color = 'linear-gradient(rgb(241, 241, 241),rgb(241, 241, 241),rgb(241, 241, 241)) left/' + (100 - parseFloat(this.value / 1000)) + '% 100%, linear-gradient(180deg, rgb(235, 150, 222) 0%, rgb(141, 33, 125) 100%) left/' + this.value / 1000 + '% 100%,linear-gradient(180deg, rgb(141, 33, 125) 0%, rgba(255, 255, 255, 0) 100%) left/' + this.value / 1000 + '% 100%'; this.style.background = $color; console.log($color); console.log(this.style.background); };#sliderPrice { width: 80%; position: relative; margin-left: 8vw; background: linear-gradient(#F1F1F1, #F1F1F1, #F1F1F1) right/80% 100%,linear-gradient(180deg, #EB96DE 0%, #8D217D 100%) left/20% 100%,linear-gradient(180deg, #8D217D 0%, rgba(255, 255, 255, 0) 100%) left/20% 100%; background-repeat: no-repeat; background-blend-mode: hard-light,normal; border-radius: 10px; border-radius: 8px; height: 7px; outline: none; transition: background 450ms ease-in; -webkit-appearance: none;}<input autocomplete="off" id="sliderPrice" type="range" class="slider" value="20000" min="0" max="100001" />

查看完整描述

4 回答

九州編程

TA貢獻(xiàn)1785條經(jīng)驗(yàn) 獲得超4個(gè)贊

您遇到的第一個(gè)問題是漸變中的位置（第一個(gè)漸變是左側(cè)而不是右側(cè)）。

要更新背景，您可以使用 css 自定義屬性并更新它。

可能固定。

（添加Math.round()以縮短背景大小重新計(jì)算值，僅用于控制臺中的可讀性）

let range = document.getElementById("sliderPrice");

range.oninput = function() {

$color =

"linear-gradient(rgb(241, 241, 241),rgb(241, 241, 241),rgb(241, 241, 241)) right / " +

Math.round((100 - parseFloat(this.value / 1000))) +

"% 100%, linear-gradient(180deg, rgb(235, 150, 222) 0%, rgb(141, 33, 125) 100%) left / " +

this.value / 1000 +

"% 100%,linear-gradient(180deg, rgb(141, 33, 125) 0%, rgba(255, 255, 255, 0) 100%) left/" +

Math.round(parseFloat(this.value / 1000)) +

"% 100%";

document.documentElement.style.setProperty("--newBg", $color);

console.log($color);

console.log(

getComputedStyle(document.documentElement).getPropertyValue("--newBg")

);

};

:root {

--newBg: linear-gradient(#f1f1f1, #f1f1f1, #f1f1f1) right/80% 100%, linear-gradient(180deg, #eb96de 0%, #8d217d 100%) left/20% 100%, linear-gradient(180deg, #8d217d 0%, rgba(255, 255, 255, 0) 100%) left/20% 100%;

}

#sliderPrice {

width: 80%;

position: relative;

margin-left: 8vw;

background: var(--newBg);

background-repeat: no-repeat;

background-blend-mode: hard-light, normal;

border-radius: 10px;

border-radius: 8px;

height: 7px;

outline: none;

transition: background 450ms ease-in;

-webkit-appearance: none;

}

反對回復(fù) 2023-08-24

楊__羊羊

TA貢獻(xiàn)1943條經(jīng)驗(yàn) 獲得超7個(gè)贊

您正在嘗試使用 JavaScript 更改 DOM 元素的 css。我認(rèn)為這是不可能的。要么使用 CSS 控制一切，要么將整個(gè)控制權(quán)放在 JS 上。我潦草地寫下了后者：

document.getElementById("sliderPrice").oninput = function() {

const value = parseFloat(this.value / 1000);

const cssText = `width: 80%;

position: relative;

margin-left: 8vw;

background: linear-gradient(180deg, #EB96DE 0%, #8D217D 100%) left/${value}% 100%;

background-repeat: no-repeat;

background-blend-mode: hard-light, normal;

border-radius: 10px;

border-radius: 8px;

height: 7px;

outline: none;

transition: background 450ms ease-in;

-webkit-appearance: none;

`;

this.style.cssText = cssText;

console.log(this.style.background);

};

請注意，我沒有在 eventHandler 外部初始化 CSS，因此當(dāng)您更改滑塊時(shí)它就會開始工作。

反對回復(fù) 2023-08-24

jeck貓

TA貢獻(xiàn)1909條經(jīng)驗(yàn) 獲得超7個(gè)贊

我不知道為什么會發(fā)生這種情況，解決方法可能是：動態(tài)地將 CSS 樣式添加到 html 標(biāo)頭，然后將類添加到元素而不是設(shè)置其樣式。

var bgGradient = 'linear-gradient(#F1F1F1, #F1F1F1, #F1F1F1) right/80% 100%,linear-gradient(180deg, #EB96DE 0%, #8D217D 100%) left/20% 100%,linear-gradient(180deg, #8D217D 0%, rgba(255, 255, 255, 0) 100%) left/20% 100%;',

/*

above css style do not works on the snippet

(maybe the problem is on the syntax of the gradient?),

so i used simply #000 color

*/

css = '.mydivclass{ background:#000 !important; }',

head = document.head || document.getElementsByTagName('head')[0],

style = document.createElement('style'),

mydiv = document.getElementById('mydiv');

head.appendChild(style);

style.type = 'text/css';

if (style.styleSheet){

// This is required for IE8 and below.

style.styleSheet.cssText = css;

} else {

style.appendChild(document.createTextNode(css));

}

head.appendChild(style)

/*

then add or remove the class to your element

*/

setInterval(()=>{

if(mydiv.classList.contains('mydivclass'))

return mydiv.classList.remove('mydivclass')

mydiv.classList.add('mydivclass')

},1000)

#mydiv{

width:100px;

height:100px;

background: yellow;

}

<html>

<head>

</head>

<body>

</div>

</body>

</html>

反對回復(fù) 2023-08-24

動漫人物

TA貢獻(xiàn)1815條經(jīng)驗(yàn) 獲得超10個(gè)贊

我想這就是你想要的......

您在第一個(gè)線性漸變中錯(cuò)過了正確的屬性。

您還需要重置 CSS 中的一些背景屬性以及您覆蓋的 Javascript 操作...

我希望這有幫助！??

document.getElementById("sliderPrice").oninput = function() {

const progress = Math.round(parseFloat(this.value / 1000));

$color = `linear-gradient(rgb(241, 241, 241),rgb(241, 241, 241),rgb(241, 241, 241)) right/${100 - progress}% 100%,

linear-gradient(180deg, rgb(235, 150, 222) 0%, rgb(141, 33, 125) 100%) left/${progress}% 100%,

linear-gradient(180deg, rgb(141, 33, 125) 0%, rgba(255, 255, 255, 0) 100%) left/${progress}% 100%`;

this.style.background = $color;

this.style['background-repeat'] = 'no-repeat';

this.style['background-blend-mode'] = 'hard-light, normal';

};

#sliderPrice {

width: 80%;

position: relative;

margin-left: 8vw;

background: linear-gradient(#F1F1F1, #F1F1F1, #F1F1F1) right/80% 100%,

linear-gradient(180deg, #EB96DE 0%, #8D217D 100%) left/20% 100%,

linear-gradient(180deg, #8D217D 0%, rgba(255, 255, 255, 0) 100%) left/20% 100%;

background-repeat: no-repeat;

background-blend-mode: hard-light, normal;

border-radius: 10px;

border-radius: 8px;

height: 7px;

outline: none;

transition: background 250ms ease-in;

-webkit-appearance: none;

}

#c {

width: 100px;

height:100px;

display:inline-block;

background:

linear-gradient(#F1F1F1, #F1F1F1, #F1F1F1) right/80% 100%,

linear-gradient(180deg, red 0%, blue 100%) left/20% 100%;

background-repeat: no-repeat;

background-blend-mode: hard-light, normal;

transition: background 450ms ease-in;

}

反對回復(fù) 2023-08-24

4 回答
0 關(guān)注
259 瀏覽

關(guān)注

添加回答

舉報(bào)

0/150

提交

取消

使用 Ctrl+D 可將網(wǎng)站添加到書簽

微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

熱搜

最近搜索清空

更改值時(shí)，HTML5 范圍無法使用 javascript 將線性漸變設(shè)置為背景。

更改值時(shí)，HTML5 范圍無法使用 javascript 將線性漸變設(shè)置為背景。

4 回答

添加回答

更改值時(shí)，HTML5 范圍無法使用 javascript 將線性漸變設(shè)置為背景。

更改值時(shí)，HTML5 范圍無法使用 javascript 將線性漸變設(shè)置為背景。