textDecoration

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.

İlgili Başlıklar