JavaScript / jQuery CSS 样式
JavaScript基础 2022-04-25 01:55:00小码哥的IT人生shichen
JavaScript / jQuery CSS 样式
jQuery vs JavaScript
jQuery 由 John Resig 于 2006 年创建。它旨在处理浏览器不兼容性并简化 HTML DOM 操作、事件处理、动画和 Ajax。
十多年来，jQuery 一直是世界上最受欢迎的 JavaScript 库。
但是，在 JavaScript Version 5（2009）之后，大多数 jQuery 实用程序都可以通过几行标准 JavaScript 来解决：
隐藏 HTML 元素
隐藏一个 HTML 元素：
jQuery
myElement.hide();
完整实例：
<!DOCTYPE html>
<html>
<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<h1>隐藏 HTML 元素</h1>
<h2 id="01">Hello World!</h2>
<h2 id="02">Hello China!</h2>
<h2 id="03">Hello Shanghai!</h2>
<p id="demo"></p>
<script>
$(document).ready(function() {
var myElement = $("#02");
myElement.hide();
});
</script>
</body>
</html>
运行结果：
隐藏 HTML 元素 Hello World! Hello Shanghai!
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
JavaScript
myElement.style.display = "none";
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>隐藏 HTML 元素</h1>
<h2 id="01">Hello World!</h2>
<h2 id="02">Hello China!</h2>
<h2 id="03">Hello Shanghai!</h2>
<script>
document.getElementById("02").style.display = "none";
</script>
</body>
</html>
运行结果：
隐藏 HTML 元素 Hello World! Hello Shanghai!
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
显示 HTML 元素
显示一个 HTML 元素：
jQuery
myElement.show();
完整实例：
<!DOCTYPE html>
<html>
<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<h1>显示 HTML 元素</h1>
<h2 id="01" style="display:none">Hello World!</h2>
<h2 id="02" style="display:none">Hello China!</h2>
<h2 id="03" style="display:none">Hello Shanghai!</h2>
<script>
$(document).ready(function() {
var myElement = $("#02");
myElement.show();
});
</script>
</body>
</html>
运行结果：
显示 HTML 元素 Hello China!
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
JavaScript
myElement.style.display = "";
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>显示 HTML 元素</h1>
<h2 id="01" style="display:none">Hello World!</h2>
<h2 id="02" style="display:none">Hello China!</h2>
<h2 id="03" style="display:none">Hello Shanghai!</h2>
<script>
var myElement = document.getElementById("02");
myElement.style.display = "";
</script>
</body>
</html>
运行结果：
显示 HTML 元素 Hello China!
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
样式化 HTML 元素
更改 HTML 元素的字体尺寸：
jQuery
myElement.css("font-size","35px");
完整实例：
<!DOCTYPE html>
<html>
<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<p id="demo">JavaScript 能够修改 HTML 元素的样式。</p>
<script>
$(document).ready(function() {
var myElement = $("#demo");
myElement.css("font-size","35px");
});
</script>
</body>
</html>
运行结果：
JavaScript 能够修改 HTML 元素的样式。
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
JavaScript
myElement.style.fontSize = "35px";
完整实例：
<!DOCTYPE html>
<html>
<body>
<p id="demo">JavaScript 能够修改 HTML 元素的样式。</p>
<script>
var myElement = document.getElementById("demo");
myElement.style.fontSize = "35px";
</script>
</body>
</html>
运行结果：
JavaScript 能够修改 HTML 元素的样式。
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
