JavaScript如何操作css
更新時間：2020年10月24日 16:21:04 作者：newmiracle宇宙
這篇文章主要介紹了JavaScript如何操作css，幫助大家更好的進行前端開發(fā)，優(yōu)化網(wǎng)頁，感興趣的朋友可以了解下
原本應該是由css進行控制html中的div的寬高和背景顏色，但是在下方使用了JavaScript進行重新調(diào)用了div盒子，并且覆蓋了css原本的屬性內(nèi)容。
需求目標:由 100 像素的粉色背景色的div盒子變成了 300像素的橘黃色效果的div盒子
代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js控制css</title>
<style>
<!-- div是html盒子的元素選擇器 -->
div{
background:pink; <!-- 背景色：粉色 -->
width:100px; <!-- 寬度：100像素-->
height:100px; <!-- 高度：100像素 -->
}
</style>
</head>
<body>
<div id="txt"></div>
</body>
</html>
<!-- JavaScript代碼只能在下面的script的標簽體中可以書寫 -->
<script>
//方式一:
//查找到id為div的標簽之后 繼續(xù)查找style屬性
// document.getElementById('txt').style.width='300px';
// document.getElementById('txt').style.height='300px';
// document.getElementById('txt').style.background='orange';
//方式二:
//先找到 id 為txt 的元素，把它放到一個變量中,這個過程可以理解為將右側(cè)的結(jié)果賦值給左側(cè)
var t = document.getElementById('txt');
// t就是變量名稱，代表著html的盒子所在位置
// 將盒子的樣式中的寬度設置為300像素
t.style.width='300px';
// 將盒子的樣式中的高度設置為300像素
t.style.height='300px';
// 將盒子的樣式中的背景色設置橘黃色
t.style.background='orange';
</script>
運行后的效果圖如下:
以上就是JavaScript如何操作css的詳細內(nèi)容，更多關于JavaScript操作CSS的資料請關注腳本之家其它相關文章！
相關文章
本文主要介紹了用js實現(xiàn)一個日歷的示例代碼并解析其實現(xiàn)原理，具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
這篇文章主要為大家詳細介紹了js簡單實現(xiàn)網(wǎng)頁換膚功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
這篇文章主要介紹了用原生js寫一個彈窗消息提醒插件，下面小編來和大家一起學習一下2019-05-05
ECharts是一個純JavaScript圖表庫,底層依賴于輕量級的Canvas類庫ZRender,下面這篇文章主要給大家介紹了關于echarts中grid圖表的位置配置的相關資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2023-04-04
BootStrap Fileinput插件和Bootstrap table表格插件相結(jié)合實現(xiàn)文件上傳、預覽、提交的導入E
這篇文章主要介紹了BootStrap Fileinput插件和Bootstrap table表格插件相結(jié)合實現(xiàn)文件上傳、預覽、提交的導入Excel數(shù)據(jù)操作步驟,需要的朋友可以參考下2017-08-08
Javascript 網(wǎng)頁黑白效果實現(xiàn)代碼(兼容IE/FF等)
今天在網(wǎng)上看到有人推薦的一個不錯的方法，試了一下，效果還是可以的，可以自定義讓網(wǎng)頁的某一部分變成灰度顏色(黑白)。2010-04-04
這篇文章主要為大家詳細介紹了js實現(xiàn)飛機大戰(zhàn)游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
下面小編就為大家?guī)硪黄猨s實現(xiàn)各種復制到剪貼板的方法(分享)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
javascript ASCII和Hex互轉(zhuǎn)的實現(xiàn)方法
下面小編就為大家?guī)硪黄猨avascript ASCII和Hex互轉(zhuǎn)的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-12-12
單擊按鈕實現(xiàn)顯示隱藏子菜單很經(jīng)典的一個案例，接下來為您呈現(xiàn)代碼，需要了解的朋友可以參考下2013-01-01