Question

是否有可能在div后面添加背景色？我想使用js在黑暗背后获得绿色。我可以基于暗块位置获取背景色，而无需父母或具有ID的父母吗？

const obj = {
  data: {
    title: 'dashboard',
    description: 'just test dashboard',
    photos: [
      {
        file_name: '12345454.jpg',
        photo_name: 'indonesia'
      },
      {
        file_name: '567686.jpg',
        photo_name: 'jakarta'
      }]
  },
}

obj.data.file_name = obj.data.photos.map(i => i.file_name)
delete obj.data.photos

console.log(obj)

Answer 1

您可以访问parentElement，然后从样式中获取颜色。

例如

const b = document.querySelector("#behindthis");
console.log(b.parentElement.style.backgroundColor);

<div style="background-color: #2eaa69; padding: 40px; box-sinzg: border-box width: 100%;">
  <div id="behindthis" style="background-color: #223344; padding: 20px; color: #fff; text-align: center">
    get color behind this block
  </div>
</div>

需要注意的一件事，如果您的样式来自CSS，那么您也可以使用getComputedStyle。

更新：刚刚注意到div中的div等。要在此处获取背景色，可以在颜色透明的情况下遍历父级。因此，我将答案更新为具有bkColor函数。

const b = document.querySelector(".this-box");

function bkColor(b) {
  const cc = window.getComputedStyle(b);
  if (cc.backgroundColor === `rgba(0, 0, 0, 0)`) {
    if (b.parentElement) return bkColor(b.parentElement);
  }
  return cc.backgroundColor;
}

console.log(bkColor(b.parentElement));

.parent-box {
  background-color: #2eaa69;
  padding: 40px;
}

.this-box {
  background-color: #223344;
  padding: 20px;
  color: #fff;
  text-align: center;
}

<div class="parent-box">
  <div>
    <div class="this-box">
      get color behind this block
    </div>
  </div>
</div>

Answer 2

是的，如果您具有前div元素，则可以获取父div：

DECLARE @LoggedInUserId   UNIQUEIDENTIFIER
                         = 'ff333441-bc4f-4f3d-b992-aad17baa9ebc'
DECLARE @LoggedInRoleId   UNIQUEIDENTIFIER
                         = '2cb31771-7cbc-4f38-b558-804308d908c7'
DECLARE @DepartmentId   UNIQUEIDENTIFIER
                       = '989fd98a-33ae-4ce1-8bbd-ed51ac46137d'
DECLARE @PeriodId   UNIQUEIDENTIFIER = 'e7e52d21-90ad-4f2d-adc2-3f5399a032dd'

SELECT *
FROM PayrollView pv
INNER JOIN Departments d
ON pv.DepartmentId = d.SysId
CROSS JOIN AppRoles r
LEFT JOIN UserDepartmentView rd
ON d.SysId = rd.DepartmentId
AND rd.RoleId = @LoggedInRoleId
AND rd.UserId = @LoggedInUserId
WHERE PeriodId = @PeriodId
AND r.SysId = @LoggedInRoleId
AND 
(
    r.DepartmentSecurityMode = 2
    AND D.SysId IN
    ( 
        (
            SELECT SysId
            FROM Departments ds
            WHERE ds.ParentHierarchy LIKE
             '%' + cast (@DepartmentId AS VARCHAR (50)) + '%'
        )
        ,
        --This is where I want to combine both the child as well the parent.
        (
            CASE
                WHEN @DepartmentId = '00000000-0000-0000-0000-000000000000' THEN D.SysId
                ELSE @DepartmentId
            END
        )
    )
)

Answer 3

如果给黑盒一个id或class，则可以通过执行以下操作获得背景div rgb的颜色（即其父级的div颜色）：

const block = document.querySelector('#block');
const greenBlock = block.parentElement;
console.log(greenBlock.style.backgroundColor);

<div style="background-color: #2eaa69; padding: 40px; box-sinzg: border-box width: 100%;">
  <div id="block" style="background-color: #223344; padding: 20px; color: #fff; text-align: center">
    get color behind this block
  </div>
</div>

如果您希望将rgb转换为颜色的hex表示形式，则可以看到this的答案。

Answer 4

是的，您可以使用javascript访问子级和父级div样式属性，并将子级的背景值设置为父级的背景值。

参见下文：

let parentDiv = document.querySelector("body > div");
let childDiv = document.querySelector("div > div");

childDiv.style.backgroundColor = parentDiv.style.backgroundColor

<div style="background-color: #2eaa69; padding: 40px; box-sinzg: border-box width: 100%;">
  <div style="background-color: #223344; padding: 20px; color: #fff; text-align: center">
    get color behind this block
  </div>
</div>

有可能在div之后获得背景色吗？

4 个答案: