我有一个网站,我试图创建一个页面的按钮的所有不同的颜色,但我想改变文字的基础上,背景是白色或黑色,让用户容易阅读它。我已经尝试了这么多,但可以得到它。我有渲染选项的顶部,然后我加粗的地方,我试图把它,如果我是布局错误或任何请纠正我
'
// Renders color options
var rgbValue = [255, 0, 0];
function setColor() {
rgbValue[0] = Math.round(Math.random() * 255);
rgbValue[1] = Math.round(Math.random() * 255);
rgbValue[2] = Math.round(Math.random() * 255);
var color = Math.round(((parseInt(rgbValue[0]) * 299) +
(parseInt(rgbValue[1]) * 587) +
(parseInt(rgbValue[2]) * 114)) / 1000);
var textColor = (color > 120) ? 'black' : 'white';
$('.background').css('color', textColor);
}
function BG_Color() {
setColor();
}
// here is the javascript i am putting it into
return filterColors.alphabetical > 0 ? filterColors.map((item, index) => {
x1米2英寸x1米3英寸
<li
style={{
backgroundImage: `url(${item.url})`
}}
key={item.url}
className={classnames('d-inline-block', 'background_shirts',{
// 'me-25': !isLastColor,
selected_color: selectedColorImage ? item.url == selectedColorImage : index == 0
})}
onClick={() => { SelectedColorView(item) }}
>
</li>
)
}) : data.colors.map((item, index) => {
// console.log('item---color', item)
return (
<li
style={{
backgroundImage: `url(${item.url})`
}}
key={item.url}
className={classnames('d-inline-block', 'background_shirts',{
// 'me-25': !isLastColor,
selected_color: selectedColorImage ? item.url == selectedColorImage : ""
})}
onClick={() => { SelectedColorView(item) }}
>**<h5 id={(BG_Color)} className='item-color, background'>{item.color}</h5>**
</li>
)
})
}
`
1条答案
按热度按时间4bbkushb1#