DOM CSS ﺖﭙﯾﺮﮑﺳﺍ ﺍﻭﺎﺟ


فهرست مطالب

    نمایش فهرست مطالب


HTML DOM ﺮﺻﺎﻨﻋ ﮏﺒﺳ ﺎﺗ ﺪﻫﺩ ﯽﻣ ﻩﺯﺎﺟﺍ ﺖﭙﯾﺮﮑﺳﺍ ﺍﻭﺎﺟ ﻪﺑ HTML ﺪﻫﺩ ﺮﯿﯿﻐﺗ ﺍﺭ.


HTML ﮏﺒﺳ ﺮﯿﯿﻐﺗ

:ﺪﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ ﻮﺤﻧ ﻦﯾﺍ ﺯﺍ ،HTML ﺮﺼﻨﻋ ﮏﯾ ﮏﺒﺳ ﺮﯿﯿﻐﺗ ﯼﺍﺮﺑ

document.getElementById(id).style.property = new style

:ﺪﻫﺩﯽﻣ ﺮﯿﯿﻐﺗ ﺍﺭ <p> ﺮﺼﻨﻋ ﻞﯾﺎﺘﺳﺍ ﺮﯾﺯ ﻝﺎﺜﻣ

ﻝﺎﺜﻣ

<html>
<body>

<p id="p2">Hello World!</p>

<script>
document.getElementById("p2").style.color = "blue";
</script>

</body>
</html>

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>
<p>Changing the HTML style:</p>


<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p>

<script>
document.getElementById("p2").style.color = "blue";
document.getElementById("p2").style.fontFamily = "Arial";
document.getElementById("p2").style.fontSize = "larger";
</script>


</body>
</html>

ﺎﻫﺩﺍﺪﯾﻭﺭ ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ

HTML DOM ﺪﯿﻨﮐ ﺍﺮﺟﺍ ﺍﺭ ﺪﮐ ،ﺪﻫﺩ ﯽﻣ ﺥﺭ ﺩﺍﺪﯾﻭﺭ ﮏﯾ ﻪﮐ ﯽﻧﺎﻣﺯ ﺎﺗ ﺪﻫﺩ ﯽﻣ ﻩﺯﺎﺟﺍ ﺎﻤﺷ ﻪﺑ.

:HTML ﺮﺻﺎﻨﻋ ﯼﺍﺮﺑ «ﺪﺘﻓﺍﯽﻣ ﻕﺎﻔﺗﺍ ﯽﯾﺎﻫﺰﯿﭼ» ﻪﮐ ﺪﻧﻮﺷﯽﻣ ﺩﺎﺠﯾﺍ ﺮﮔﺭﻭﺮﻣ ﻂﺳﻮﺗ ﯽﻧﺎﻣﺯ ﺎ

  • ﺩﻮﺷ ﯽﻣ ﮏﯿﻠﮐ ﺮﺼﻨﻋ ﮏﯾ ﯼﻭﺭ

  • ﺖﺳﺍ ﻩﺪﺷ ﯼﺭﺍﺬﮔﺭﺎﺑ ﻪﺤﻔﺻ

  • ﺪﻨﮐ ﯽﻣ ﺮﯿﯿﻐﺗ ﯼﺩﻭﺭﻭ ﯼﺎﻫﺪﻠﯿﻓ

.ﺪﺷ ﺪﯿﻫﺍﻮﺧ ﺎﻨﺷﺁ ﺮﺘﺸﯿﺑ ﺎﻫﺩﺍﺪﯾﻭﺭ ﺎﺑ ﺵﺯﻮﻣﺁ ﻦﯾﺍ ﯼﺪﻌﺑ ﻞﺼﻓ ﺭﺩ

ﻪﮐ ﯽﻧﺎﻣﺯ ،ﺪﻫﺩﯽﻣ ﺮﯿﯿﻐﺗ id="id1" ﺎﺑ ﺍﺭ HTML ﺮﺼﻨﻋ

ﻝﺎﺜﻣ

<!DOCTYPE html>
<html>
<body>
<h1 id="id1">My Heading 1</h1>

<button type="button" 
onclick="document.getElementById('id1').style.color = 'red'">
Click Me!</button>
</body>
</html>

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<body>

<h1 id="id1">My Heading 1</h1>

<button type="button" 
onclick="document.getElementById('id1').style.color = 'red'">
Click Me!</button>

</body>
</html>


ﺮﺘﺸﯿﺑ ﯼﺎﻫ ﻪﻧﻮﻤﻧ

ﺪﯾﺩ

<!DOCTYPE html>
<html>
<body>

<p id="p1">
This is a text.
This is a text.
This is a text.
This is a text.
</p>

<input type="button" value="Hide text" onclick="document.getElementById('p1').style.visibility='hidden'">
<input type="button" value="Show text" onclick="document.getElementById('p1').style.visibility='visible'">

</body>
</html>

HTML DOM ﮏﺒﺳ ءﯽﺷ ﻊﺟﺮﻣ

ﺪﯿﻨﮐ ﻩﺎﮕﻧ ﺎﻣ ﻞﻣﺎﮐ ﺖﻤﺴﻗ ﻪﺑ ،HTML DOM ﮏﺒﺳ ﯼﺎﻫﯽﮔﮋﯾﻭ ﻪﻤﻫ ﯼﺍﺮﺑ