javascript入门经典(第6版)第13章课后练习

  1. 在椭圆形的div上使用getComputedStyle(),以向控制台显示这些边框的的半径。
<style>
#div1 {
  width: 500px;
  height: 300px;
  background: black;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
}
</style>

<body>
<div id="div1"></div>
<input type="button" value="Click me!" onclick="compStyle()">
<script>
   var oDiv = document.getElementById('div1');
   alert(window.getComputedStyle(oDiv ).getPropertyValue("width"))
   var bRadBL = window.getComputedStyle(oDiv ).getPropertyValue("border-bottom-left-radius");
   var bRadBR = window.getComputedStyle(oDiv ).getPropertyValue("border-bottom-right-radius");
   var bRadTL = window.getComputedStyle(oDiv ).getPropertyValue("border-top-left-radius");
   var bRadTR = window.getComputedStyle(oDiv ).getPropertyValue("border-top-right-radius");
   var bRad = getComputedStyle(oDiv ).getPropertyValue("borderRadius");
function compStyle(){
   
    alert("Top Left Radius: "+bRadTL+"\nBottom Left Radius: "+bRadBL+"\nTop Right Radius: "+bRadTR+"\nBottom   Right Radius: "+bRadBR);
  }
</script>
</body>

2.在本章的"实践练习"部分中,边框的阴影方向是手动设置的,而你想要编写代码,正确地模拟光照方向。能否用Javascript编写一个函数,根据检测到的背景渐变的值,来设置阴影属性。

写出来了,虽然不是完全契合题意,但至少是自动变化了写出来了,虽然不是完全契合题意,但至少是自动变化了在这里插入图片描述
调试结果图片
在这里插入图片描述

展开阅读全文

没有更多推荐了,返回首页