>  기사  >  웹 프론트엔드  >  요소를 얻기 위한 JavaScript 메서드 및 속성 분석 예

요소를 얻기 위한 JavaScript 메서드 및 속성 분석 예

黄舟
黄舟원래의
2017-11-01 10:23:511673검색

js 요소 가져오기 방법

내장된 objectdocument에 있는 getElementById 메서드를 사용하여 페이지에 설정된 id 속성이 있는 요소를 가져올 수 있습니다. html 객체를 얻은 다음 이를 변수

  <scripttype="text/javascript">    var op =document.getElementById(&#39;p1&#39;);
   alert(op)弹出对话框
 </script>  <p id="p1">这是一个p元素</p>


Butnote:위의 코드 조각을 93f0f5c25f18dab9d176bd4f6de5d30e 9c3bca370b5104690d9ef395f2c5f8d1 中오류가 발생합니다

해결 방법:컴퓨터 로딩

<scripttype="text/javascript">    
1.window.onload = function(){        
2.var op = document.getElementById(&#39;p1&#39;);    
}
  </script>
 
<p id="p1">这是一个p元素</p>

js 작업 요소의 속성

얻은 페이지 요소를 작업할 수 있습니다. 에 페이지 요소의 속성에는 읽기 및 쓰기 속성이 포함됩니다.

속성 조작 방법

  • 1. "." 연산

  • 2.

속성 작성 방법

1.html의 속성은 js
  • 2의 속성과 동일하게 작성됩니다. "className"
  • 3. "style" 속성의 속성,

    가로 막대가 있는 것을 Camel Case로 변경하세요
  • . 예: "font-size", "style.fontSize"Get 점을 통한 속성 (.)

  • <scripttype="text/javascript">
    1.加载:window.onload =function(){        
    2.获取:var oInput = document.getElementById(&#39;input1&#39;);        
    2.获取:var oA = document.getElementById(&#39;link1&#39;);        
    3.//读取属性值        
    var sValue =oInput.value;        
    var sType =oInput.type;        
    var sName =oInput.name;        
    var sLinks = oA.href;        
    4.//写(设置)属性        
    oA.style.color = &#39;red&#39;;        
    oA.style.fontSize = sValue;    
    }
    </script>
    <inputtype="text" name="setsize" id="input1"value="20px"><a href="" id="link1">百度</a>

Get

<scripttype="text/javascript">
1.加载:window.onload= function(){        
2.获取:var oInput1 =document.getElementById(&#39;input1&#39;);        
2.获取:var oInput2 =document.getElementById(&#39;input2&#39;);        
2.获取:var
 oA =document.getElementById(&#39;link1&#39;);        
3.//读取属性        
var sVal1 = oInput1.value;        
var sVal2 = oInput2.value;        
4.//写(设置)属性        
// oA.style.val1 = val2; 没反应        
oA.style[sVal1] = sVal2;          
 }
</script>
<inputtype="text" name="setattr" id="input1"value="fontSize">
<input type="text" name="setnum" id="input2"value="30px">
<a href="" id="link1">百度</a>

via [ ]

얻은 태그의 innerHtml 속성을 통해 태그 패키지의 내용을 읽고 씁니다.

  • op.innerHtml

  • 쓰기 op.innerHTML = "새 내용"

위 내용은 요소를 얻기 위한 JavaScript 메서드 및 속성 분석 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.