1. 程式人生 > >在js中操作html的元素

在js中操作html的元素

如何在js中找到網頁中的元素: 1.獲取頁面中的標籤元素,獲取到元素後,在js中是一種元素物件, js對這種物件會提供一些操作元素的屬性和方法;

2.grtElementById 表示在文件中通過元素的id屬性值來獲取元素,引數是字串, 直接寫值,不需要加上#號 獲取到元素後,儘量儲存到變數中,方便後續操作 獲取元素以後,儲存在變數中,就可以通過這個變數操作元素,操作元素一般分為三個方面: 元素的內容,元素的屬性,元素的css樣式

			//獲取元素以後,儲存在變數中,就可以通過這個變數操作元素,操作元素一般分為三個方面:元素的內容,元素的屬性,元素的css樣式
				var oh1 = document.getElementById('title')
				    console.log(oh1)

				    //通過innerHTML屬性獲取內容
				    console.log(oh1.innerHTML)
				    //操作內容
				    oh1.innerHTML = '經過js操作後的h1內容'

				    //獲取元素屬性值
				    console.log(oh1.title)
				    //操作元素屬性值
				    oh1.title = '重新設定的提示文字'

				    //注意,在獲取元素的class值時要特殊處理,通過className來訪問/操作
				    console.log(oh1.className)
				    //操作className的值
				    oh1.className = 'son'

				    //操作元素的css樣式
				    oh1.style.border = "1px solid orange"

				    //對於css樣式中,如果出現樣式屬性的名稱是多個單詞的,使用-連線的需要去掉-,把-後的單詞首字母大寫連在一起寫
				    //原因是-在js中表示數學運算了
				    //例如:line-height   =>  lineHeight