Html&Js笔记（持续更新中...）

原创已于 2023-07-31 16:44:35 修改 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #javascript #前端

于 2023-06-09 16:54:26 首次发布

JavaScript笔记专栏收录该内容

21 篇文章

订阅专栏

本文介绍了Html和Js的基础知识，包括控件的右对齐、按钮属性与事件处理、下拉列表的使用以及如何用Js实现按钮跳转。此外，还讨论了控件的可见性设置，如隐藏时是否占位，以及在Vue框架中的应用。最后，提到了如何使用Js修改超链接的样式，如添加下划线和改变颜色。

Html&Js笔记（持续更新中...）

Html&Js笔记（持续更新中...）
一. 基本控件的使用
二. 设置控件的可见性：
三超链接加加划线和改变颜色：

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这个页面。

二. 设置控件的可见性：

2.1. 隐藏时占位：

具体方法如下：

在html中：

<div id="id-left" style="visibility: hidden">
</div>

js代码：

function show(isShow) {
	console.log("show isshow:", isShow);
	if (isShow){
		//show
		var leftColumn = document.getElementById("id-left");
		leftColumn.style="visibility: show";
	}else {
		//hide
		var leftColumn = document.getElementById("id-left");
		leftColumn.style="visibility: hidden";
	}
}

2.2. 隐藏时不占位，使用hidden

使用hidden属性：

<div id="id-left" hidden='true'>
</div>

2.3. 隐藏时不占位，使用display

使用display：

<div id="id-left" style="display: none">
</div>

2.4 vue中使用show 或hide方法：

function setVisible(isShow) {
	const $ = this.$;
	if (isShow) {
		$('#id-field').show();
	}else {
		$('#id-field').hide();
	}
	
}

三超链接加加划线和改变颜色：

js范例代码如下：

var LinkStr =  "<a href=" + "\"" +  element.baidu_link + "\""
        + " style='color: #1589FF;text-decoration:underline;'"
        + " target=" + "\"" + "_blank" +  "\"" +">" + "链接"
        + "</a>";