Cara mengatur nilai span id di javascript

bogotobogo. pencarian situs com

Memperbarui rentang saat teks masukan berubah menggunakan DOM API

  
    
    One-way Data Binding
  
  
    Name:
    

    

    Hello !
    
  

bogotobogo. pencarian situs com

Memperbarui rentang ketika teks masukan berubah menggunakan jQuery

  
    
    One-way Data Binding with jQuery
    
  
  
    Name:
    

    

    Hello !
    
  

Memperbarui rentang ketika teks input berubah menggunakan Backbone

  
    
    One-way Data Binding with Backbone
    
    
    
  
  
    Name:
    

    

    Hello !
    
  
 

Anda dapat menggunakan tag HTML span_ sebagai wadah untuk mengelompokkan elemen sebaris sehingga Anda dapat mengatur gaya atau memanipulasinya dengan JavaScript

Pada artikel ini, saya akan menunjukkan kepada Anda bagaimana menggunakan tag rentang untuk membuat bagian tertentu dari konten Anda berbeda dari yang lain. Maka Anda harus dapat mulai menggunakannya dalam proyek pengkodean Anda

Untuk apa tag span_ digunakan?

Tag span_ sama seperti div, yang digunakan untuk mengelompokkan konten serupa sehingga semuanya dapat ditata bersama

Tapi span berbeda karena merupakan elemen sebaris, berlawanan dengan

.crimson-text {
      color: crimson;
   }

Juga, perlu diingat bahwa span itu sendiri tidak berpengaruh pada kontennya kecuali jika Anda menatanya

Ada dua kegunaan utama tag span – menata dan memanipulasi teks tertentu dengan JavaScript

Cara menata teks dengan tag span

Jika Anda ingin membuat beberapa teks tertentu atau konten lain yang berbeda dari yang lain, Anda dapat membungkusnya dalam tag span, berikan atribut kelas, lalu pilih dengan nilai atribut untuk gaya

Dalam contoh di bawah ini, saya mengubah

.crimson-text {
      color: crimson;
   }

.crimson-text {
      color: crimson;
   }

body {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        height: 100vh;
      }

Cara mengubah warna teks

<p>This a <span class="crimson-text">crimson text</span> within others.</p>

.crimson-text {
      color: crimson;
   }

Saya telah menambahkan beberapa CSS dasar untuk memusatkan semua yang ada di halaman

body {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        height: 100vh;
      }

Cara mengubah warna latar belakang

<p>
      A <span class="green-background">green background color</span> perfectly
      implies the beauty of nature.
</p>

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

Cara mengubah gaya font

<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;
   }

Cara Memanipulasi JavaScript dengan tag span

Seperti halnya mungkin untuk menata konten dengan membungkus tag span di sekelilingnya, Anda juga dapat memanipulasi konten dengan membungkusnya dalam tag span. Anda memberinya atribut

body {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        height: 100vh;
      }

Pada contoh di bawah ini, saya mengubah beberapa teks di dalam teks lain menjadi huruf besar dengan JavaScript

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

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

uppercase.style.textTransform = "uppercase";

Kesimpulan

Dalam tutorial ini, Anda telah mempelajari cara memanipulasi potongan teks tertentu dengan CSS dan JavaScript dengan membungkusnya dalam tag span dan memberinya atribut unik

body {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        height: 100vh;
      }

Harap dicatat bahwa dalam kasus seperti ini, Anda harus menggunakan kelas untuk gaya dan id untuk manipulasi dengan JavaScript untuk menghindari kebingungan

Terima kasih telah membaca, dan terus coding

IKLAN

IKLAN

IKLAN

Kolade Chris

Pengembang web dan penulis teknis yang berfokus pada teknologi frontend

Jika Anda membaca sejauh ini, tweet ke penulis untuk menunjukkan bahwa Anda peduli. Tweet terima kasih

Belajar kode secara gratis. Kurikulum open source freeCodeCamp telah membantu lebih dari 40.000 orang mendapatkan pekerjaan sebagai pengembang. Memulai

Bagaimana cara menetapkan nilai rentang dalam JavaScript?

Bisakah Anda memasukkan ID pada span?

Bagaimana Anda menetapkan nilai ke rentang?

Bagaimana cara memberikan ID tag span?