Table of contents
3.5 background-color attribute
4.3 Get elements according to the class name
4.4 Get elements based on css selectors
1. Effect display
addition:
Subtraction:
multiplication:
division:
Divisor by 0:
2. Source code
2.1HTML+CSS source code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="cal.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
.cal {
width: 400px;
background-color: skyblue;
margin: 50px auto;
border-radius: 10px;
}
.cal h1 {
background-color: rebeccapurple;
height: 60px;
line-height: 60px;
border-radius: 10px 10px 0 0;
text-align: center;
color: azure;
}
.from-control {
padding: 25px 50px;
}
.form-control label {
text-align: right;
}
.form-control,input {
padding: 5px 10px;
height: 20px;
border: 1px black;
border-radius: 5px;
}
.form-control,button{
width: 67px;
height: 32px;
font-size: 25px;
border-radius: 5px;
border: none;
background-color: forestgreen;
}
.result {
height: 25px;
width: 200px;
}
</style>
</head>
<body>
<div class="cal">
<h1>COUNTER</h1>
<div class="from-control">
<label>NumberOne</label>
<input type="text" id="num1"/>
</div>
<div class="from-control">
<label>NumberTwo</label>
<input type="text" id="num2"/>
</div>
<div class="from-control">
<button id="plus">+</button>
<button id="reduce">-</button>
<button id="mul">*</button>
<button id="dev">/</button>
</div>
<div class="from-control">
<label >RESULT</label>
<input type="text" class="result"/>
</div>
</div>
</body>
</html>2.2 JS source code
window.addEventListener('load',function(){
document.querySelector('#plus').onclick = function() {
cal('+');
}
document.querySelector('#reduce').onclick = function() {
cal('-');
}
document.querySelector('#mul').onclick = function() {
cal('*');
}
document.querySelector('#dev').onclick = function() {
cal('/');
}
function cal(symbom) {
let num1 = document.getElementById('num1').value;
let num2 = document.getElementById('num2').value;
let result = document.querySelector('.result');
if(symbom == '/') {
if(num2 == 0) {
result.value = "除数不能为零";
}else {
result.value = num1 / num2;
}
}else {
result.value = eval(num1 + symbom + num2);
}
}
})3. CSS properties
3.1width, height attribute
width sets the width and height sets the height.
<body>
<input type="button" value="按钮"/>
</body>Original button size:
After width and height modification:
<style>
#but{
height: 60px;
width: 100px;
}
</style>
<body>
<input type="button" value="按钮" id="but"/>
</body>
3.2font-size property
font-size is an attribute to set font size, and its common unit is px . For example, set the font of a paragraph to 30px:
<style>
.title {
font-size: 30px;
}
</style>
<body>
<a class="title">这是一段话</a>
</body>
After font-size modification:
3.3margin property
The margin attribute is an attribute that modifies the margin, and margin has four parameter values . Thus, there are four margin cases.
Case 1
margin:10px,15px,20px,30px;- Top margin is 10px
- right margin is 15px
- Bottom margin is 20px
- The left margin is 30px
Case 2
margin:20px,30px,15px- The top margin is 20px
- right margin is 30px
- Bottom margin is 15px
Case 3
margin:10px,20px- Top margin is 10px
- right margin is 20px
Case 4
margin:50px- All four margins are 50px
Let's take the case of four margins to show the effect:
<style>
.ty {
margin:50px ;
}
</style>
<body>
<div class="ty">
<label>这是一个label:</label>
<input type="text" />
</div>
</body>
3.4 padding property
Above we know that the margin is to set the outer margin, then the inner margin is modified by padding , and there are four situations:
Case 1
padding:10px,5px,15px,20px;- The top padding is 10px
- Right padding is 5px
- Bottom padding is 15px
- The left padding is 20px
Case 2
padding:10px,5px,15px;- The top padding is 10px
- Right padding and left padding are 5px
- Bottom padding is 15px
Case 3
padding:10px,5px;- The top and bottom paddings are 10px
- Right padding and left padding are 5px
Case 4
padding:100px;- The top, bottom, left and right padding is 100px
Let's take case 4 as an example:
<style>
.test {
padding: 50px;
}
</style>
<body>
<table border="1">
<tr><td class="test"></td></tr>
</table>
</body>The effect shows:
3.5 background-color attribute
The effect achieved by the background-color attribute is the background color, such as setting the background color of a piece of text to sky blue:
<style>
.title {
background-color: skyblue;
}
</style>
<body>
<a class="title">这是一段话</a>
</body>
display effect:
3.6 border property
The border attribute is an attribute for modifying the border. We can set the size and color of the border. The syntax is: border: size solid color; if we only have size but no solid value, the default color is black.
<style>
.ty {
border: 2px solid red;
}
</style>
<body>
<label>这是一个label:</label>
<input type="text" class="ty"/>
</body>
3.7 border-radius attribute
The border-radius attribute is the "roundness" of the modified border, that is, adding a rounded border to the element. The syntax is: border-radius: size; for example, set a border with a rounded border of 10px.
<style>
.ty {
border-radius: 10px;
}
</style>
<body>
<label>这是一个label:</label>
<input type="text" class="ty"/>
</body> The effect shows:
3.8 text-align property
The text-align attribute is used to specify the alignment of the text. The alignment methods include left alignment, center alignment, and right alignment . The left alignment is the default alignment.
Center alignment :
<style>
.test {
text-align: center;
}
</style>
<body>
<h1 class="test">这是一个标题</h1>
</body>The effect shows:
Align right :
<style>
.test {
text-align: right;
}
</style>
<body>
<h1 class="test">这是一个标题</h1>
</body> Show results:
4、DOM
4.1 Get elements based on id
document.getElementById gets elementsbased on id , as shown in the following code:
<body>
<div>
<label>Number:</label>
<input type="text" id="num1"/>
</div>
<div>
<button id="but">按钮</button>
</div>
<script>
document.getElementById('but').onclick = function() {
let num = document.getElementById('num1').value;
console.log(num);
}
</script>
</body>When I input 55, and then click the button, the console outputs 55:
Therefore, adding .onclick after document.getElementById in the above code means clicking the button to perform the corresponding operation, and adding .value means getting the value corresponding to the id.
4.2 Get elements by name
document.getElementByName is based on the name to get the element
<body>
<p>请选择你的兴趣爱好(多选):</p>
<input type="checkbox" name="sports" value="拳击"/>拳击
<input type="checkbox" name="sports" value="柔术"/>柔术
<input type="checkbox" name="sports" value="摔跤"/>摔跤
<input type="checkbox" name="sports" value="散打"/>散打
<script>
var sports = document.getElementsByName('sports');
console.log(sports[0]);
console.log(sports[1]);
</script>
</body>In the above code, we get the two form elements boxing and jujitsu through document.getElementsByName('sports'):
4.3 Get elements according to the class name
document.getElementByClassName is toget elements according to class
<body>
<div>
<p class="person1">阿珍</p>
<p class="person2">阿强</p>
</div>
<script>
let person1 = document.getElementsByClassName('person1');
console.log(person1[0]);
</script>
</body>
4.4 Get elements based on css selectors
document.querySelector obtains elementsaccording to css selectors , as in the following code:
<body>
<div class="mma">拳击</div>
<div class="mma">柔术</div>
<div class="mma">摔跤</div>
<script>
//第一个div
let firstdiv = document.querySelector('.mma');
console.log(firstdiv);
//所有的div
let alldiv = document.querySelectorAll('.mma');
console.log(alldiv);
</script>
</body>
This blog post mainly explains some forms and CSS attributes in HTML plus DOM in JS. The article explains in detail the implementation effect and usage of each knowledge point. When you come down, you must try to type the code yourself. Only when we implement some pages can we understand this knowledge point and how to achieve a certain effect. There are also many knowledge points in the article that have not realized the page effect. You can also test it yourself to feel the realization effect of these knowledge points, come on!
This blog is over here, thank you for reading. If you gain something, please give the blogger a little attention, and we will see you next time.