background-color 相关问题

`background-color`是一个CSS属性，用于定义元素的背景颜色。

如何使用 JavaScript 获取任何元素的背景颜色，例如？我努力了：罗... 如何使用 JavaScript 获取任何元素的背景颜色，例如 <div>？我试过： <html> <body> <div id="myDivID" style="background-color: red"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div> <input type="button" value="click me" onclick="getColor();"> </body> <script type="text/javascript"> function getColor() { myDivObj = document.getElementById("myDivID") if (myDivObj) { console.log('myDivObj.bgColor: ' + myDivObj.bgColor); // shows: undefined console.log('myDivObj.backgroundcolor: ' + myDivObj.backgroundcolor); // shows: undefined //alert ( 'myDivObj.background-color: ' + myDivObj.background-color ); // this is not a valid property :) console.log('style:bgColor: ' + getStyle(myDivObj, 'bgColor')); //shows: undefined console.log('style:backgroundcolor: ' + getStyle(myDivObj, 'backgroundcolor')); // shows:undefined: console.log('style:background-color: ' + getStyle(myDivObj, 'background-color')); // shows: undefined } else { console.error('Error: When function "getColor();" was called, no element existed with an ID of "myDivId".'); } } /* copied from `QuirksMode` - http://www.quirksmode.org/dom/getstyles.html - */ function getStyle(x, styleProp) { if (x.currentStyle) var y = x.currentStyle[styleProp]; else if (window.getComputedStyle) var y = document.defaultView.getComputedStyle(x, null).getPropertyValue(styleProp); return y; } </script> </html> 获取号码： window.getComputedStyle( *Element* , null).getPropertyValue( *CSS* ); 例子： window.getComputedStyle( document.body ,null).getPropertyValue('background-color'); window.getComputedStyle( document.body ,null).getPropertyValue('width'); ~ document.body.clientWidth 与所有包含连字符的css属性一样，它们在JS中的对应名称是去掉连字符并将以下字母大写：backgroundColor alert(myDiv.style.backgroundColor); 简单的解决方案 myDivObj = document.getElementById("myDivID") let myDivObjBgColor = window.getComputedStyle(myDivObj).backgroundColor; 现在背景颜色存储在新变量中。 https://jsfiddle.net/7q1dpeo9/1/ 使用 jQuery： jQuery('#myDivID').css("background-color"); 有原型： $('myDivID').getStyle('backgroundColor'); 使用纯 JS： document.getElementById("myDivID").style.backgroundColor 这取决于您需要的 div 中的哪种样式。这是在CSS中定义的背景样式还是通过javascript(inline)添加到当前节点的背景样式？在CSS风格的情况下，你应该使用计算风格。就像你在 getStyle(). 使用内联样式你应该使用node.style参考：x.style.backgroundColor; 另请注意，您通过使用驼峰式/非连字符参考来选择样式，所以不是background-color，而是backgroundColor; 这对我有用： var backgroundColor = window.getComputedStyle ? window.getComputedStyle(myDiv, null).getPropertyValue("background-color") : myDiv.style.backgroundColor; 而且，甚至更好： var getStyle = function(element, property) { return window.getComputedStyle ? window.getComputedStyle(element, null).getPropertyValue(property) : element.style[property.replace(/-([a-z])/g, function (g) { return g[1].toUpperCase(); })]; }; var backgroundColor = getStyle(myDiv, "background-color"); 使用 JQuery： var color = $('#myDivID').css("background-color"); 您可以在您的控件上绘制一个画布元素，即使不显示它，如果它有多种颜色，也可以在您的控件中的特定位置获取颜色。 <head> <style> </style> </head> <body><div style="border:gray solid 2px;height:575px;width:700px;position:absolute;top:75px;right:15px;background:black;color:white;font-Family:Century SchoolBook;font-Size:18px;padding-Top:20px;" id="container101"><div id="header" style="text-Align:center">ColorPicker</div> <div id="div101" style="position:absolute;top:60px;left:100px;width:500px;height:500px;"></div> <canvas height="500" width="500" style="position:absolute;top:60px;left:100px;display:none;" id="canva"></canvas> </div> <script> function create(r1,g1,b1,r2,g2,b2){dv101 = document.querySelector("#div101");dv101.style.background = "linear-gradient(90deg, rgb("+r1+", "+g1+", "+b1+"), rgb("+r2+", "+g2+", "+b2+"))"; var can = document.querySelector("#canva"); var context = can.getContext("2d"); context.rect(0, 0, 500, 500); var grd = context.createLinearGradient(0,0,can.width,0); grd.addColorStop(0, "rgb("+r1+", "+g1+", "+b1+")"); grd.addColorStop(1, "rgb("+r2+", "+g2+", "+b2+")"); context.fillStyle = grd; context.fillRect(0,0,500,500); dv101.onmousemove = (event) => { var posx = event.clientX-dv101.offsetLeft- document.querySelector("#container101").offsetLeft; var posy = event.clientY-dv101.offsetTop- document.querySelector("#container101").offsetTop; console.log(posx,posy); var data = context.getImageData(posx,posy,1,1); couleur = "rgb("+data.data[0]+","+data.data[1]+","+data.data[2]+")"; document.body.style.background=couleur; } return couleur; };create(255, 0, 0, 0, 0, 255); var arr = new Array(); function inp(x,y){ var input1 = document.createElement('input'); var cont = document.querySelector("#container101"); cont.appendChild(input1); arr.push(input1); input1.type = "text"; input1.style = "outline:none;position:absolute;top:"+y+"px;left:"+x+"px;height:30px;width:60px;background:white;color:black;"; input1.value = 0; input1.onkeydown = (event) => { switch(event.keyCode){ case 38: input1.value++; create(arr[0].value, arr[1].value, arr[2].value, arr[3].value, arr[4].value,arr[5].value); break; case 40: input1.value--; create(arr[0].value, arr[1].value, arr[2].value, arr[3].value, arr[4].value,arr[5].value); break; }; } };inp(5,60);inp(5,110);inp(5,160);inp(610,60);inp(610,110);inp(610,160); </script> </body> </html> 这是一个工作小提琴。 https://jsfiddle.net/cdgpts9n/

javascript html background-color

回答 8 投票 0

根据值更改单元格颜色，其中有单个单元格和多个单元格变化

我正在为学生创建日历样式的时间表。我们有很多课程，所以为了简化时间表，我制作了一个星期天开始的日历表，日历中的那些课程由依赖下拉列表组成。例如

excel vba calendar background-color

回答 1 投票 0

为什么按钮的背景颜色在 Android Studio 中没有改变

单击按钮后，我试图更改按钮的样式。我的计划：当用户点击按钮时，它会改变背景颜色（橙色 -> 白色）、边框（无 -> 橙色边框）、文本颜色 ...

android button border background-color

回答 0 投票 0

按钮“发送”不会改变 CSS 中的颜色

当鼠标光标经过或停留在按钮上（未单击）时，我无法更改“发送”按钮的颜色。。发送 { 背景色：白色；颜色：黑色; 填充：10px ...

css button background-color

回答 0 投票 0

如何更改word文档中文本的默认高亮颜色？请建议 office js 的方法这样做

我需要将默认文本突出显示颜色从灰色更改为任何其他颜色。请建议使用 office js 的任何方法。 office js改变word中文字高亮颜色的方法做...

react-native ms-word office-js background-color highlight

回答 0 投票 0

如何使用 jquery 淡入/淡出背景颜色？

如何使用 jQuery 淡入文本内容？关键是要引起用户对消息的注意。

jquery css background-color fade

回答 9 投票 0

更改 Shiny 应用程序中内容窗格的背景颜色？

我使用 plotly 制作了一个闪亮的饼图应用程序。该应用程序显示有多少大豆从阿根廷罗萨里奥港出口到五十多个国家。通过添加"/?COUNTRY=X&qu...

shiny background-color

回答 0 投票 0

如何使用 jquery 检查元素的背景颜色

if($(this).css("background-color")==深红色) 它是否正确？ .css("background-color","white") 会改变颜色，但我不想改变，我想知道它是什么颜色。

jquery css background-color

回答 5 投票 0

如何根据背景颜色设置文字颜色？

我需要根据背景颜色更改文本颜色。我可以使用 mix-blend-mode: difference 和 filter: invert(1) 来实现我需要的效果，但颜色不太正确。对于前...

css background-color mix-blend-mode

回答 1 投票 0

背景色仅覆盖表格旋转单元格中的边框

我有一个表格，其中一些单元格被旋转例如：我有一个表格，其中一些单元格是旋转的例如： <th rowspan="13" style="border-bottom: solid 1px #000000; writing-mode: vertical-rl; transform: rotate(-180deg); padding-left: 10px; padding-right: 5px; font-weight: normal; font-size: 0.9em; background-color: #fff7e6;">Radial</th> 表格格式如下： <table style="border-top: solid 1px #000000; border-bottom: solid 1px #000000; border-collapse: collapse; max-width: 90%; margin-left: auto; margin-right: auto; margin-top: 4vh; margin-bottom: 6vh; text-align: center; font-family: 'Calibri', sanserif;"> 行没有格式背景颜色 - 仅在这些旋转的单元格中 - 将重叠并覆盖边界线，如 border-bottom: solid 1px #000000; 在 Firefox 中，重叠位于旋转单元格的底部边框上在 Edge 中，重叠位于顶部相邻单元格的底部边界 - 是否旋转在 Chrome 中，问题不存在 Overlap size = 1px only (if border thickness set to 2px, 1px become visible) 我读过不同的古老讨论，关于如何克服未旋转单元格的类似错误，比如使用背景剪辑属性但是没有一个解决方案在这里起作用有人知道吗？谢谢

border background-color overlap

回答 0 投票 0

HTML/CSS - 导航栏的背景颜色在放置在另一个背景上时具有神秘的黑白条

我遇到了一个非常神秘和令人抓狂的问题，导航栏会在鼠标悬停时改变颜色。每次我尝试分配导航栏以在悬停时更改颜色时，它都会出现

html css hover overlay background-color

回答 0 投票 0

为什么当前颜色是黑色？这是默认值吗？

我正在显示一个 img 如下（Blazor 但我认为这无关紧要）。我正在显示一个 img 如下（Blazor，但我认为这无关紧要）。 <div id="drop-down-target" style="margin: 10px" class="menu-icon" @onclick="() => IsOpen = !IsOpen"> <img src="@_base64Image" class="resizable-image circled s-16 menu-icon" alt="User Avatar placeholder" /> </div> 黑底显示如下：忽略图片向下移动了一点（为此输入另一个查询）。为什么是黑色的？如果我去掉background-color: currentColor，那么它就有一个白色的背景。 .menu-icon { width: 1rem; height: 1rem; min-width: 1rem; min-height: 1rem; background-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background-position: center center; background-color: currentColor; } 这里是 F12（注意没有颜色设置）：

css background-color

回答 0 投票 0

如何使用 PlantUML 为项目添加背景色

在 Visual Studio Code 中，我正在尝试为我的“项目”添加背景颜色。根据文档，它应该像这样工作： @startuml LogAdministration_C1 !include ../../../src/diagrams/

background-color plantuml

回答 0 投票 0

有没有办法在 VS 代码中运行代码时以不同的颜色显示不同的字符？

我是一名业余程序员，目前正在练习C++，我使用VS Code作为我的代码编辑器。我目前正在做一个项目，需要我用不同的颜色显示各种字符，...

c++ visual-studio-code animation themes background-color

回答 0 投票 0

Safari 渲染图像背景黑色加载

我目前正在一个网站上工作，但遇到 Safari 问题。加载图像时，有一个黑色背景作为替身。我宁愿它是透明的或白色的，但是...