The Overlapping Rectangles using CSS and Javascript

  • 时间:2020-09-20 13:49:13
  • 分类:网络文摘
  • 阅读:104 次
three-rectangles-css-div The Overlapping Rectangles using CSS and Javascript CSS HTML5 javascript

Make three rectangles as shown in the figure. Clicking on any rectangle should alert the name of the rectangle

Make three rectangles as shown in the above figure. Clicking on any rectangle should alert the name of the rectangle.

Three Rectangles in HTML Div Containers

The Three rectangles can be represented using HTML Div containers/elements. The outmost rectangle (also the biggest one) wraps the second biggest and so on.

1
2
3
4
5
6
7
<div id="Div1">
  <div id="Div2">
    <div id="Div3">
 
    </div>
  </div>
</div>
<div id="Div1">
  <div id="Div2">
    <div id="Div3">

    </div>
  </div>
</div>

CSS

We can use the CSS to control how these rectangles look like e.g. the colour, the size etc.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
div {
    border-style: solid;
    border-color: grey;    
    cursor: pointer;
    text-align: center;
}
 
div#Div1 { 
    background-color: lightblue;
    width: 500px;    
    height: 400px;
}
 
div#Div2 { 
    background-color: orange;
    width: 400px;
    height: 300px;    
    margin: 50px;
}
 
div#Div3 {
    background-color: transparent;
    width: 300px;
    height: 200px;    
    margin: 50px;
}
div {
    border-style: solid;
    border-color: grey;    
    cursor: pointer;
    text-align: center;
}

div#Div1 { 
    background-color: lightblue;
    width: 500px;    
    height: 400px;
}

div#Div2 { 
    background-color: orange;
    width: 400px;
    height: 300px;    
    margin: 50px;
}

div#Div3 {
    background-color: transparent;
    width: 300px;
    height: 200px;    
    margin: 50px;
}

Behavior in Javascript

Finally, we can use Javascript to define the clicking behaivor. We can define each Div’s onclick event but that is not an elegant solution as there will be duplicate code and you have to manually associate the behavior for each rectangle by ID explicitly.

1
2
3
4
5
6
7
8
const divs = document.querySelectorAll("div");
for (let i = 0; i < divs.length; ++ i) {
    divs[i].addEventListener('click', function(i) {
        alert(divs[i].id);
        // avoid fired more than once for overlapping area
        event.stopPropagation();        
    }.bind(this, i));
}
const divs = document.querySelectorAll("div");
for (let i = 0; i < divs.length; ++ i) {
    divs[i].addEventListener('click', function(i) {
        alert(divs[i].id);
        // avoid fired more than once for overlapping area
        event.stopPropagation();        
    }.bind(this, i));
}

The above Javascript will query all the Divs and add event listner (click) to each of them. Remember to call event.stopPropagation to avoid firing multiple events on the overlapping area.

Want to see how the above combines and works together in the JS playground?: https://jsfiddle.net/9mpjegL8/

–EOF (The Ultimate Computing & Technology Blog) —

推荐阅读:
Two Pointer and Sliding Window Algorithm to Find K-Length Substr  How to Get the Maximum Level Sum of a Binary Tree using Breadth   Compute the Minimum Costs to Connect the Sticks using Priority Q  Single-Row Keyboard Algorithms to Estimate the Finger Moving Tim  Bruteforce Algorithm to Find the Next Closet Time Reusing the Cu  The Overlapping Rectangles using CSS and Javascript  How to Count the Distinct Pairs using HashMap?  Blogger Jailed For Pokemon Go Gets Even More Trouble  Dead Simple Ways to Keep Your Best Blogging Ideas From Slipping   The Fear of Blogging is Real – Here’s How to Overcome It 
评论列表
添加评论