文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何使用事件处理程序操作框阴影的颜色？

问如何使用事件处理程序操作框阴影的颜色？
EN

Stack Overflow用户
提问于 2017-10-23 22:44:49
回答 2查看 38关注 0票数 1

我正在构建一个应用程序，其中包含六个不同的主题，在一个带有框阴影的柔性箱中。

我的目标是使用事件处理程序操作框影的颜色，这样框影颜色将更改并匹配最终用户选择的任何主题的按钮颜色。(例如，如果用户单击“技术”主题的按钮，框影应从#D1D1D1更改为#6699 if )

我花了几个小时在MDN和Treehouse上试图找到一个解决方案，但没有结果。

我在这个问题中发布的jQuery没有正确地执行，我真的需要一些帮助！

到目前为止，我已经编写了以下内容：

代码语言：javascript
复制
$(“.buttons”).click(function(){
  var color = $(this).css(“background-color”);
  var box-shadow = “0 5px” + color;
  $(this).parent().css("box-shadow”);
});
代码语言：javascript
复制
/* =================================
  Page Styles
==================================== */

* {
	box-sizing: border-box;
}

body {
	font-size: 1.2em;
	font-family: 'Varela Round', sans-serif;
	color: #fff;
	background: #f2f2f2;
	padding-left: 5%;
	padding-right: 5%;
}

header {
	text-align: center;
	color: #000;
	font-size: 1.2em;
}

.topics {
	padding: 10px;
	background: #fff;
  border-radius: 25px;
	margin: 45px auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	text-align: center;
	box-shadow: 0 2.5px 0 0 #d1d1d1;
}

.technology {
	color: #fff;
	padding: 15px;
	margin: 5px;
	background: #6699FF;
	border-radius: 3px;
}

.business {
	color: #fff;
	padding: 15px;
	margin: 5px;
	background: #32BC67;
	border-radius: 3px;
}

.entertainment {
	color: #fff;
	padding: 15px;
	margin: 5px;
	background: #9F60FF;
	border-radius: 3px;
}

.shopping {
	color: #fff;
	padding: 15px;
	margin: 5px;
	background: #F44658;
	border-radius: 3px;
}

.sports {
	color: #fff;
	padding: 15px;
	margin: 5px;
	background: #FE9900;
	border-radius: 3px;
}

.weather {
	color: #fff;
	padding: 15px;
	margin: 5px;
	background: #FFC100;
	border-radius: 3px;
}

/* =================================
  Flexbox
==================================== */

.articles {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    background: #fff;
    border-radius: 25px;
    flex-wrap: wrap;
    justify-content: space-around;
    text-align: left;
    box-shadow: 0 0 10px #D1D1D1;
}

.article-1 {
  display: table-cell;
  background-color: #fff;
  width: 300px;
  height: 200px;
  border-radius: 3px;
  border-color: #D1D1D1;
  border-width: 1px;
  padding: 50px;
  margin: 25px;
  box-shadow: 2px 2px 10px #D1D1D1;
}

.article-2 {
		display: table-cell;
    background-color: #fff;
    width: 300px;
    height: 200px;
		border-radius: 3px;
    border-color: #D1D1D1;
    border-width: 1px;
    padding: 50px;
    margin: 25px;
    box-shadow: 2px 2px 10px #D1D1D1;
}

.article-3 {
		display: table-cell;
    background-color: #fff;
    width: 300px;
    height: 200px;
		border-radius: 3px;
    border-color: #D1D1D1;
    border-width: 1px;
    padding: 50px;
    margin: 25px;
    box-shadow: 2px 2px 10px #D1D1D1;
}
代码语言：javascript
复制
<!DOCTYPE html>
<html>

<head>
	<title>Daily News</title>
	<link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" href="css/page.css">
	<link rel="stylesheet" href="css/flexbox.css">
</head>

<body>
	<header>
	</header>

	<nav class="topics">
		<nav class="technology">Technology</nav>
		<nav class="business">Business</nav>
		<nav class="entertainment">Entertainment</nav>
		<nav class="shopping">Shopping</nav>
		<nav class="sports">Sports</nav>
		<nav class="weather">Weather</nav>
	</nav>

	<section class="articles">

	<section class=article-1>
	</section>

	<section class=article-2>
	</section>

	<section class=article-3>
	</section>

	</section>

</body>

</html>

​

html
css
javascript
jquery
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2017-10-23 22:54:52

您忘记向按钮中添加buttons类，还使用了.css()方法:应该是.css("box-shadow", boxShadow);。您的代码还有更多的小问题，下面是工作示例：

​

代码语言：javascript
复制
$(".buttons").click(function(){
  var color = $(this).css("background-color");
  var boxShadow = "0 5px " + color;
  $(this).parent().css("box-shadow", boxShadow);
});
代码语言：javascript
复制
/* =================================
  Page Styles
==================================== */

* {
	box-sizing: border-box;
}

body {
	font-size: 1.2em;
	font-family: 'Varela Round', sans-serif;
	color: #fff;
	background: #f2f2f2;
	padding-left: 5%;
	padding-right: 5%;
}

header {
	text-align: center;
	color: #000;
	font-size: 1.2em;
}

.topics {
	padding: 10px;
	background: #fff;
  border-radius: 25px;
	margin: 45px auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	text-align: center;
	box-shadow: 0 2.5px 0 0 #d1d1d1;
}

.technology {
	color: #fff;
	padding: 15px;
	margin: 5px;
	background: #6699FF;
	border-radius: 3px;
}

.business {
	color: #fff;
	padding: 15px;
	margin: 5px;
	background: #32BC67;
	border-radius: 3px;
}

.entertainment {
	color: #fff;
	padding: 15px;
	margin: 5px;
	background: #9F60FF;
	border-radius: 3px;
}

.shopping {
	color: #fff;
	padding: 15px;
	margin: 5px;
	background: #F44658;
	border-radius: 3px;
}

.sports {
	color: #fff;
	padding: 15px;
	margin: 5px;
	background: #FE9900;
	border-radius: 3px;
}

.weather {
	color: #fff;
	padding: 15px;
	margin: 5px;
	background: #FFC100;
	border-radius: 3px;
}

/* =================================
  Flexbox
==================================== */

.articles {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    background: #fff;
    border-radius: 25px;
    flex-wrap: wrap;
    justify-content: space-around;
    text-align: left;
    box-shadow: 0 0 10px #D1D1D1;
}

.article-1 {
  display: table-cell;
  background-color: #fff;
  width: 300px;
  height: 200px;
  border-radius: 3px;
  border-color: #D1D1D1;
  border-width: 1px;
  padding: 50px;
  margin: 25px;
  box-shadow: 2px 2px 10px #D1D1D1;
}

.article-2 {
		display: table-cell;
    background-color: #fff;
    width: 300px;
    height: 200px;
		border-radius: 3px;
    border-color: #D1D1D1;
    border-width: 1px;
    padding: 50px;
    margin: 25px;
    box-shadow: 2px 2px 10px #D1D1D1;
}

.article-3 {
		display: table-cell;
    background-color: #fff;
    width: 300px;
    height: 200px;
		border-radius: 3px;
    border-color: #D1D1D1;
    border-width: 1px;
    padding: 50px;
    margin: 25px;
    box-shadow: 2px 2px 10px #D1D1D1;
}
代码语言：javascript
复制
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
	<title>Daily News</title>
	<link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" href="css/page.css">
	<link rel="stylesheet" href="css/flexbox.css">
</head>

<body>
	<header>
	</header>

	<nav class="topics">
		<nav class="technology buttons">Technology</nav>
		<nav class="business buttons">Business</nav>
		<nav class="entertainment buttons">Entertainment</nav>
		<nav class="shopping buttons">Shopping</nav>
		<nav class="sports buttons">Sports</nav>
		<nav class="weather buttons">Weather</nav>
	</nav>

	<section class="articles">

	<section class=article-1>
	</section>

	<section class=article-2>
	</section>

	<section class=article-3>
	</section>

	</section>

</body>

</html>

​

票数 1
EN

Stack Overflow用户

发布于 2017-10-23 22:52:54

如果你必须：

代码语言：javascript
复制
$(“.buttons”).click(function(){
  var color = $(this).css(“background-color”);
  var box-shadow = “0 5px” + color;
  $(this).parent().css("box-shadow”);
});

应该更像

代码语言：javascript
复制
$('.buttons').click(function(){
  var t = $(this);
  t.parent().css('boxShadow', '0 5px '+t.css('backgroundColor'));
});

只要使用一个字符串参数，.css()就会获得一个单一样式的属性。它使用两个参数分配一个样式属性。以一个对象作为参数，它遍历该对象，并分配多个样式属性。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/46899614

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档