gpt4 book ai didi

javascript - CSS - 更改框阴影列表中的特定框阴影

转载 作者:太空狗 更新时间:2023-10-29 15:05:23 26 4
gpt4 key购买 nike

我们如何覆盖一个特定值并保留 box-shadow 列表中的所有其他值,如下所示:

div{

box-shadow: 0 0 0 5px #00ff00 , 0 0 0 10px #ff0000 , 0 0 0 15px #0000ff ;

}

假设我们只想覆盖第二个值而不丢失其他值:

div.with-another-shadow{

box-shadow: ??? , 0 0 0 5px #abcdef , ??? ;

}

似乎只有当我们也复制粘贴第一个和第三个值时才有可能。它不适用于 autoinherit

是否可以仅使用 css 来实现这一点,或者我们需要使用 jQuery 或 JavaScript 的 getComputedStyle 方法或其他方法?

这是 Playground :http://jsfiddle.net/cherniv/uspTj/5/

附言似乎它也与多个 background 图像列表相关..

最佳答案

这不是一般情况的真正解决方案,而是解决 fiddle 特殊情况的技巧:

div{
box-shadow: 0 0 0 5px green, 0 0 0 10px #ff0000 , 0 0 0 15px blue;
position: relative;
}

div:nth-of-type(2):after {
content: '';
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
margin: -5px;
box-shadow: 0 0 0 5px yellow;
}

demo

我正在创建一个伪元素来容纳第二个阴影,并设置一个边距(负值)使其超过第一个阴影,这样我就不会在上面绘制了。

这是另一个演示,通过 JavaScript 更改值

demo2

脚本如下

function change () {
var elem = document.getElementById("test");
var style = window.getComputedStyle(elem);
var boxShadow = style.boxShadow;
var arrayBoxShadows = parseFirstComma (boxShadow);

var newData = elem.dataset.boxshadow;
var arrayNewData = parseFirstComma (newData);
boxShadow = "";
var nmax = Math.min (arrayBoxShadows.length, arrayNewData.length)
for (var n = 0, lenR = nmax; n < lenR; n++) {
if (n > 0) {
boxShadow = boxShadow + ", ";
}
if (arrayNewData[n] == "inherit") {
boxShadow = boxShadow + arrayBoxShadows[n];
} else {
boxShadow = boxShadow + arrayNewData[n];

}
}
if (arrayNewData.length > nmax) {
for (var n = nmax, lenR = arrayNewData.length; n < lenR; n++) {
if (n > 0) {
boxShadow = boxShadow + ", ";
}
boxShadow = boxShadow + arrayNewData[n];
}
}
if (arrayBoxShadows.length > nmax) {
for (var n = nmax, lenR = arrayBoxShadows.length; n < lenR; n++) {
if (n > 0) {
boxShadow = boxShadow + ", ";
}
boxShadow = boxShadow + arrayBoxShadows[n];
}
}


elem.style.boxShadow = boxShadow;
}


function parseFirstComma (property) {
var properties = new Array();
var curr = "";
var chr;
var nested = "";

for (inx = 0, len = property.length; inx < len; inx++) {
chr = property[inx];
if (chr == "(") nested += 1;
if (chr == ")") nested -= 1;
if (nested == 0 && chr == ",") {
properties.push (curr);
curr = "";
} else {
curr = curr + chr;
}
}
if (curr.length > 0) {
properties.push (curr);
}
return properties;
};

document.onkeydown = function (e) {
e = e || window.event;
switch(e.which || e.keyCode) {
case 37:
change ();
break;
}
}

我正在检索应用于元素的框阴影,并从数据值中检索所需的覆盖。然后,重新计算结果(使用 inherit 作为可能值)。按向左箭头激活演示。

关于javascript - CSS - 更改框阴影列表中的特定框阴影,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18692541/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com