textDecoration özelliği, element içeriğindeki metnin süsleme şeklini belirler.
DOM Sözdizimi
element.style.textDecoration = "bicim"
CSS Sözdizimi
text-decoration: bicim
| bicim | Aşağıdaki değerleri alarak metnin süsleme biçimini belirler. |
CSS text-decoration Değerleri
| text-decoration: | Canlı Sonuç | Açıklama |
|---|
| none |
myNotlar |
Süsleme yok. |
| underline |
myNotlar |
Alt çizgi |
| overline |
myNotlar |
Üst çizgi |
| line-through |
myNotlar |
Üstü çizgili |
| blink |
myNotlar |
Yanıp-Sönen (IE Hariç) |
href özniteliği ile kullanılan A elementi, U ve INS elementlerinin text-decoration özelliği varsayılan olarak underline değerindedir.
STRIKE, S ve DEL elementlerinin text-decoration özelliği varsayılan olarak line-through değerindedir.
Aşağıdaki örnek, fare imleci ile paragtaf üzerine gelindiğinde style.textDecoration özelliği ile paragraf içindeki linklerin altlarının çizilerek belirtilmesini göstermektedir.
<style type="text/css">
a.ornekLink
{
text-decoration: none;
color:black;
}
</style>
<script type="text/javascript">
function ac()
{
var paraf = document.getElementById("ornekParaf");
var linkler = paraf.getElementsByTagName("A");
for(i = 0; i < linkler.length;i++)
{
linkler[i].style.textDecoration = "underline";
linkler[i].style.color = "blue";
}
}
function kapat()
{
var paraf = document.getElementById("ornekParaf");
var linkler = paraf.getElementsByTagName("A");
for(i = 0; i < linkler.length;i++)
{
linkler[i].style.textDecoration = "none";
linkler[i].style.color = "black";
}
}
</script>
<p id="ornekParaf" onmouseover="ac()" onmouseout="kapat()">Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed do <a class="ornekLink" href="#">eiusmod</a> tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
<a class="ornekLink" href="#">irure</a> dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. <a class="ornekLink" href="#">Excepteur</a>
sint occaecat cupidatat non proident, sunt in <a class="ornekLink" href="#">culpa</a>
qui officia deserunt mollit anim id est laborum.</p>
Test Edin
Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est laborum.