HTML spanetiketini satır içi öğeleri birlikte gruplandırmak için kapsayıcı olarak kullanabilirsiniz, böylece bunları JavaScript ile biçimlendirebilir veya değiştirebilirsiniz.

spanEtiket ne için kullanılır?

spanEtiket sadece hepsi bir araya tarz böylece grup benzer içerikli için kullanılan bir div gibidir.

Ancak span, divblok öğesi olan yerine satır içi bir öğe olması bakımından farklıdır .

Ayrıca, spansiz onu biçimlendirmediğiniz sürece, içeriğinin kendisi üzerinde herhangi bir etkisi olmadığını unutmamak gerekir.

spanEtiketin iki ana kullanımı vardır – belirli bir metni JavaScript ile şekillendirmek ve işlemek.

Etiketle metin nasıl spanstillendirilir

Belirli bir metni veya başka herhangi bir içeriği diğerlerinden farklı yapmak istiyorsanız, onu bir spanetiketi ile biçimlendirebilir, ona bir sınıf niteliği verebilir ve ardından onu stil için nitelik değeriyle birlikte seçebilirsiniz.

Aşağıdaki örneklerde , bazı metinlerin color, background-color, ve font-styleöğelerini bir spanetikete sararak değiştiriyorum .

Metin rengi nasıl değiştirilir 
<p>This a <span class="crimson-text">crimson text</span> within others.</p>

.crimson-text {
      color: crimson;
   }

Sayfadaki her şeyi ortalamak için bazı temel CSS ekledim:

body {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        height: 100vh;
      }
Arka plan rengi nasıl değiştirilir 
<p>
      A <span class="green-background">green background color</span> perfectly
      implies the beauty of nature.
</p>
Yazı tipi stili nasıl değiştirilir 
<p>
   An <span class="font-style">italic</span> font style could be instrumental
   in laying emphasis on a text.
</p>

.font-style {
     font-style: italic;
   }
.green-background { background-color: #2ecc71; }

JavaScript spanetiketi ile nasıl manipüle edilir

İçeriğin spanetrafına bir etiket sararak stil vermek mümkün olduğu gibi, içeriğinizi bir etikete sararak da değiştirebilirsiniz span. Ona bir idnitelik verirsiniz ve ardından onu manipüle edebilmek için JavaScript ile kimliğine göre seçersiniz.

Aşağıdaki örnekte, JavaScript ile diğer metinlerin içindeki bazı metinleri büyük harf olarak değiştirdim:

<p>
   The text, <span id="uppercase"> freecodecamp</span>, was turned to
   upperase with JavaScript
</p>

const uppercase = document.querySelector("#uppercase");

uppercase.style.textTransform = "uppercase";