Metin, her uygulama veya web sayfası için en önemli ve en görünür varlıktır; metin kullanılmadan içerik oluşturucu, düşüncelerini tam olarak aktaramaz veya bilgileri düzgün bir şekilde iletemez. İhtiyacı ve önemi nedeniyle, stili de çoğu geliştirici için bir kabusa dönüşüyor. Statik metin için CSS özellikleri ve çerçevesi çok yardımcı olur ancak yine de stile dinamik olarak uygulanabilecek bir özelliğe ihtiyaç vardır. Neyse ki bu özellik “” isimli JavaScript tarafından sağlanmaktadır. metinDekorasyon ”.
Bu blog, textDecoration özelliği aracılığıyla HTML öğesi üzerine stilleri uygulama prosedürünü sağlayacaktır.
HTML DOM Stili textDecoration Özelliğini Kullanarak Stiller Nasıl Uygulanır?
DOM stili “ metinDekorasyon ” özelliği temel olarak “ ekleme gibi stillendirme gerçekleştirir altı çizili”, “üstü çizili”, “çizgili” ve “yanıp sönen” ”seçili bir öğenin üzerine. Bu özellik “ olarak ayarlandığında hiçbiri ”, bir bağlantı etiketi gibi o öğenin üzerine uygulanan varsayılan stili kaldırır.
Sözdizimi
DOM stili textDecoration özelliğinin sözdizimi şöyledir:
eleObj. stil . metinDekorasyon = 'yok|üst çizgi|yanıp sönme|altı çizili|ilk|satır geçişi|devral'
“” öğesine atanabilecek değerler hakkında hızlı bir fikir edinmek için aşağıdaki tabloyu ziyaret edin. metinDekorasyon ' mülk:
| Değer | Açıklama |
|---|---|
| hiçbiri | Önceden tanımlanmış tüm stilleri kaldırarak metni düz formata dönüştürün; bu varsayılandır. |
| üst çizgi | Seçilen metnin üzerine veya üstüne bir çizgi ekler. |
| göz kırpmak | Metnin yanıp sönmesini sağlar ancak tüm web tarayıcıları tarafından desteklenmez. |
| altını çizmek | Çizgiyi seçilen metnin altına veya altına yerleştirir. |
| ilk | Uygulanan özelliği, bizim durumumuzda olmayan varsayılan değerine ayarlayın. |
| hat boyunca | Çizgiyi metnin ortasına, yani metnin arasına yerleştirin. |
| miras aldın | Kök veya üst öğeye uygulanan özelliği devralır. |
Şimdi “” ifadesinin her bir değeri için uygulama sürecine ve bunun metin üzerindeki etkisine bir göz atalım. metinDekorasyon ' mülk.
Örnek 1: “textDecoration = none” Özelliği
“Uygulamalı olarak uygulanması” metinDekorasyon “değeri olan mülk” hiçbiri ” aşağıdaki kodda açıklanacaktır:
< vücut >
< merkez >
< h1 stil = 'renk: öğrenci mavisi;' > Linux < / h1 >
< düğme tıklamada = 'Uygulayıcı()' > Uygulayıcı < / düğme >
< P > textDecoration özelliğinin değeri none olarak ayarlandığında: < / P >
< h3 İD = 'kullanım durumu' stil = 'metin dekorasyonu: üst çizgi;' > Hedeflenen Öğe < / h3 >
< / merkez >
< senaryo >
function Uygulayıcı() {
document.getElementById('useCase').style.textDecoration = 'yok';
}
< / senaryo >
< / vücut >
Yukarıda belirtilen kodun açıklaması:
- Öncelikle “<” kullanın düğme >” etiketini kullanarak bir düğme oluşturun ve ona “ olay dinleyicisini atayın. tıklamada ”. Bu olay dinleyicisi 'adlı bir JavaScript işlevini tetikler' Uygulayıcı ”.
- Ardından, hedeflenen bir öğe oluşturun ' h3 ”ve ona benzersiz bir kimlik atayın:“ kullanım durumu ”. Ayrıca CSS'yi uygulayın “ metin dekorasyonu 'özelliği' değerine sahip üst çizgi ' yardımıyla' stil ' bağlanmak.
- Şimdi “girin” Uygulayıcı ()” işlev gövdesini seçin ve hedeflenen öğeyi kimliği aracılığıyla seçin “ kullanım durumu ' ve ' stilini ekleyin metinDekorasyon ' mülk.
- Daha sonra özelliğe “” değerini atayın. hiçbiri Öğenin üzerine önceden uygulanmış metin dekorasyon stilini kaldırmak için.
Yukarıdaki kodun yürütülmesinden sonra web sayfasının görünümü:
Çıktı, hedeflenen öğeye uygulanan ön şekillendirmenin, ona '' değeri atanarak kaldırıldığını gösterir. hiçbiri ”.
Örnek 2: “textDecoration = başlangıç” Özelliği
Aşağıdaki kod parçacığı, '' uygulamasının uygulanmasını göstermektedir. metinDekorasyon ” özelliği “ değeri olduğunda ilk ” ona atanmıştır:
< senaryo >işlev Uygulayıcı ( ) {
belge. getElementById ( 'kullanım durumu' ) . stil . metinDekorasyon = 'ilk' ;
}
senaryo >
Yukarıdaki kodun derlenmesinden sonra oluşturulan çıktı aşağıda gösterilmiştir:
Yukarıdaki çıktı, metin süsleme değerinin varsayılan değer olan ' hiçbiri ”ve dolayısıyla tüm ön şekillendirme geri alındı.
Örnek 3: “textDecoration = overline” Özelliği
Aşağıdaki kod '' ifadesinin pratik uygulamasını göstermektedir. metinDekorasyon ” özelliği “ değeri olduğunda üst çizgi ” ona sağlanmıştır:
< vücut >< merkez >
< h1 stil = 'renk: öğrenci mavisi;' > Linux < / h1 >
< düğme tıklamada = 'Uygulayıcı()' > Uygulayıcı < / düğme >
< P > textDecoration özelliğinin değeri üst çizili olarak ayarlandığında: < / P >
< h3 İD = 'kullanım durumu' > Hedeflenen Öğe < / h3 >
< / merkez >
< senaryo >
function Uygulayıcı() {
document.getElementById('useCase').style.textDecoration = 'overline';
}
< / senaryo >
< / vücut >
Yukarıdaki kodun açıklaması aşağıda belirtilmiştir:
- İlk önce ' düğmesi” ve “h3 ” elemanı aynı şekilde oluşturulur ve üzerine uygulanan CSS özelliği “h3” eleman artık kaldırılmıştır.
- Daha sonra, “içinde Uygulayıcı ” fonksiyonu hedeflenen öğe seçilir ve “ metinDekorasyon “değeri olan mülk” üst çizgi ” elemanına atanır.
Yukarıdaki kodun çalıştırılmasından sonraki çıktı aşağıda gösterilmiştir:
Çıktı şu efekti gösterir: textDecoration = üst çizgi ” özelliği metnin üzerinde.
Örnek 4: “textDecoration = underline” Özelliği
Metnin pratik uygulaması “değeri” olduğunda altını çizmek ”,“ öğesine atanır metinDekorasyon ” özelliği aşağıda belirtilmiştir:
< senaryo >işlev Uygulayıcı ( ) {
belge. getElementById ( 'kullanım durumu' ) . stil . metinDekorasyon = 'altını çizmek' ;
}
senaryo >
Derleme sonrasında çıktı şu şekilde görünür:
Çıktı, satırın metnin altına eklendiğini gösterir.
Örnek 5: “textDecoration = line-through” Özelliği
“ görsel uygulaması metinDekorasyon “değerine sahip mülk” hat boyunca ” aşağıda gösterilmektedir:
< senaryo >işlev Uygulayıcı ( ) {
belge. getElementById ( 'kullanım durumu' ) . stil . metinDekorasyon = 'hat boyunca' ;
}
senaryo >
Yukarıdaki kod için oluşturulan çıktı aşağıda gösterilmektedir:
Çıktı, “ tarafından yapılan efekti gösterir. hat boyunca ” hedeflenen öğe metninin üzerine.
Çözüm
HTML DOM stili “ metinDekorasyon ” özelliği, metin öğelerinde dinamik stil oluşturmak için özellikle HTML öğelerinin JavaScript aracılığıyla stillendirilmesiyle ilgilenir. Buna birden fazla değer atanabilir” metinDekorasyon ” farklı stil varyasyonlarını gerçekleştirmek için. Bu değerler “ yok”, “üst çizgi”, “altı çizili”, “satır geçişli”, “ilk”, “yanıp sönme” ve “devralma” ”. Bu blog, geliştiricinin textDecoration özelliğini kullanarak stilleri uygulayabileceği süreci başarıyla açıkladı.