css 基于按钮背景更改颜色的Javascript

s3fp2yjn  于 2022-12-15  发布在  Java
关注(0)|答案(1)|浏览(213)

我有一个网站,我试图创建一个页面的按钮的所有不同的颜色,但我想改变文字的基础上,背景是白色或黑色,让用户容易阅读它。我已经尝试了这么多,但可以得到它。我有渲染选项的顶部,然后我加粗的地方,我试图把它,如果我是布局错误或任何请纠正我
'

// 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>
  )
})

}

`
4bbkushb

4bbkushb1#

If I understand correctly you want some of your html elements to have a black background and white text, and others to have a white background and black text.
If this is your problem then how I would do it is give the elements to have a black background a class of “blackBackground”, and give the ones to have a white background a class of “whiteBackground”.
I would then use css to give the class “blackBackground” the style atributes of “background-color: black;” and “color: white;”
Then give “whiteBackground” the style atributes of “background-color: white;” and “color: black;”

相关问题