Html&Js笔记（持续更新中...）
Html&Js笔记（持续更新中...）
- Html&Js笔记（持续更新中...）
- 一. 基本控件的使用
-
- 1.控件靠右显示
- 2.设置按钮的属性和点击事件
- 3.下拉列表的使用
- 4.js中实现一个按钮的跳转
- 二. table的使用：
-
- 1. 右边框的设置：
- 2. 只给表格单元格加右边框
- 3. 动态设置右边框的风格
Html&Js笔记（持续更新中…）
你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。
一. 基本控件的使用
1.控件靠右显示
可以使用CSS的float属性将控件向右浮动，或者使用text-align属性将其父元素的文本对齐方式设置为右对齐。
例如：
<div style="text-align: right;">
<input type="text" style="float: right;">
div>
2.设置按钮的属性和点击事件
<input type = "button" style="margin-right: 100px;float: right;background-color: #4C56B6;color: white" onclick="testAlert()">
3.下拉列表的使用
<select name="myclass" id="id-myclass">
<option value = "一班" selected="selected">一班option>
<option value = "二班">二班option>
select>
4.js中实现一个按钮的跳转
可以使用window.location.href来实现按钮的跳转，例如：
HTML代码：
<button onclick="goToPage()">跳转到新页面</button>
JavaScript代码：
function goToPage() {
window.location.href = "https://www.example.com";
}
当用户点击按钮时，就会跳转到https://www.example.com这个页面。
二. table的使用：
1. 右边框的设置：
可以使用CSS样式来给table单元格加边框，具体方法如下：
- 在CSS样式中设置table的边框样式和宽度：
table {
border-collapse: collapse; /* 合并边框 */
border: 1px solid #ccc; /* 边框样式和颜色 */
}
- 在CSS样式中设置td单元格的边框样式和宽度：
td {
border: 1px solid #ccc; /* 边框样式和颜色 */
}
完整的示例代码如下：
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Table Bordertitle>
<style>
table {
border-collapse: collapse;
border: 1px solid #ccc;
}
td {
border: 1px solid #ccc;
}
style>
head>
<body>
<table>
<tr>
<td>单元格1td>
<td>单元格2td>
<td>单元格3td>
tr>
<tr>
<td>单元格4td>
<td>单元格5td>
<td>单元格6td>
tr>
table>
body>
html>
2. 只给表格单元格加右边框
可以使用CSS来给表格单元格加边框。如果只想给表格单元格加右边框，可以使用以下CSS代码：
td {
border-right: 1px solid black;
}
这会给所有表格单元格添加一个1像素宽的黑色实线右边框。如果只想给特定的表格单元格添加右边框，可以使用类或ID选择器来选择特定的单元格，例如：
td.right-border {
border-right: 1px solid black;
}
这会给所有带有“right-border”类的表格单元格添加一个1像素宽的黑色实线右边框。在HTML中，可以将该类添加到要添加右边框的单元格中：
<td class="right-border">单元格内容td>
3. 动态设置右边框的风格
要动态设置右边框的风格，可以使用JavaScript来实现。具体步骤如下：
-
获取需要设置右边框的元素。
-
使用JavaScript的style属性来设置元素的border-right属性。
-
根据需要设置不同的右边框风格，可以使用以下属性：
-
border-right-style：设置右边框的样式，如solid、dashed、dotted等。
-
border-right-width：设置右边框的宽度，可以使用像素值或者百分比。
-
border-right-color：设置右边框的颜色，可以使用颜色名称、RGB值或者十六进制值。
-
-
在需要改变右边框风格的时候，调用JavaScript代码来修改元素的border-right属性即可。
以下是一个示例代码，可以动态设置一个元素的右边框为红色实线：
// 获取需要设置右边框的元素
var element = document.getElementById("myElement");
// 设置右边框的样式、宽度和颜色
element.style.borderRightStyle = "solid";
element.style.borderRightWidth = "1px";
element.style.borderRightColor = "red";
需要注意的是，如果需要设置多个元素的右边框风格，可以使用循环来遍历每个元素并设置其border-right属性。