Birkaç video önce, öğeleri seçme ve bunları değiştirme konseptini tanıttım.
Dolayısıyla bir H1 veya tüm resim etiketleri seçeriz ve sonra rengi değiştirebilir veya canlandırabilir veya üzerlerine
tıkladığınızda bir şeyler yapabiliriz.
Şimdiye kadar seçme yarısını ve bu videoyu yalnızca kapsamış olduk.
Öğeleri seçtikten sonra öğeleri değiştirmek için birçok yöntemden birkaç tanesini tanıtacağız.
İşte konuşmak istediğim dört ana şey var.
İlki, bir öğe stilini nasıl değiştiririz.
Mavi yapmak ya da gizlemek için nasıl yapacağız.
Yazı tipi boyutunu değiştirin.
Sonraki olarak, sınıfları javascript ile ekleme ve kaldırma ve ardından bir etiketin içeriğini değiştirme hakkında
konuşacağız.
Örneğin bir H-1 etiketinin içindeki metni nasıl değiştirebilirim?
Ve sonra son değiştiren nitelikler.
Öyleyse, bir resim etiketinde veya AA etiketi üzerindeki referans üzerinde nasıl değişiklik yapacağız.
Stil özelliği hakkında konuşarak başlayacağız.
özelliği, yüzlerce özellik ayarlayabildiğimiz her CSSA mülkü için bir tane büyük bir nesne.
Dolayısıyla DOM kurulduğunda ve tek bir düğüm yapıldığında veya her öğe için bir nesne yapıldığında
stil adı verilen bir özellik var ve style
Bu durumda, stil ve öğeye farklı şekilde gidecek javascript yazabiliriz.
Yani burada bir öğeyi onun Id vurguluğuyla seçiyorum, bu nedenle etiketi adı verilen bir değişkene kaydetmeyi ve sonra
onu değiştirmeyi seçin.
Ve ne yaptığımı ayarlarım.
Etiket nokta stili nokta rengi mavi etiket nokta stili nokta kenarlığı 10 pikseldir kırmızıya eşittir.
Sağ tarafın bir dize olması gerektiğini unutmamak önemlidir.
Dolayısıyla, Css'de mavi veya 70 Px civarında tırnak işaretleri koymamıza rağmen.
Bu Css değil.
Bu javascript.
Dolayısıyla hala normal javascript kurallarını takip etmek zorundayız.
Bu nedenle, bu özelliklerin bazılarını göstermek için kullanacağım basit bir web sayfam var.
Dolayısıyla bu web sayfası, o paragraftan çok basit bir H-1 paragraf kadar basittir.
Güçlü bir etiket var ve ardından iki sevimli corgi karışımından oluşan iki görüntü var.
ve bir şeyler seçerek başlamam lazım ve bu H-1'in rengini ve sınırını değiştireceğim.
Bu yüzden ne yapacağım Konsolos'a gitmek
Dolayısıyla onu seçmek zorundayım ve bunu, seçici H-1'i sorgulayan yeni bir belgede yapmak
için birden fazla yol var.
Ve sonra sana büyük bir nesne olan ton-ton mülk H-1 tarzı göstereceğim.
Bu yüzden onlardan birini H-1 tarzı koyu renk gibi değiştirip sarı yapmayı deneyeceğim.
Ve hemen sarıya dönüştüğünü görebiliyorduk.
Sınır H-1 ile aynı olan bu kenar boşluğu stili beş piksel katı pembe yapın.
Ve işte gidiyoruz.
Elbette ki sadece bunun pembe bir sınıra sahip sarı olmasını istediysek.
Sayfa yüklendiği andan itibaren bunu yapmak için javascript kullanmak için hiçbir neden yok.
CSSA dosyasına koyduk, javascript kullanılıyordu; kullanıcı sarı sayfaya gelmişti ve kullanıcı beş saniyeliğine
sayfaya geldiğinde pembe bir kenarlığı var, yoksa kullanıcı belirli bir bölümüne ilerlediğinde bunun
olmasını isterdi. sayfa veya kullanıcı bir şey üzerine tıkladı.
Her şey etkileşimli hale getirilmesiyle ilgilidir ve kısa süre içerisinde nasıl yapılacağını göreceğiz.
burada kendim yapıyormuşum gibi bir öğe üzerinde bir sürü dosyayı manipüle
ediyorsanız ve bu etikette beş farklı özelliği değiştirirseniz, kesinlikle daha iyi bir yol var demektir.
Stil özelliğini kullanma hakkında güzel bir şey,
Ve daha iyi bir yol olduğunun birkaç nedeni var.
Birincisi, bu çok kuru kod değil.
Stil etiketli stil etiketli tekrarlanan bir sürü şey var.
Daha da önemlisi, endişelerin ayrılması denilen bu kavram olsa da.
Dolayısıyla, endişeleri birbirinden ayırmak, HM L K R İ K İ L İ Ş K K K K s v not javascript olduğu konseptidir.
Her biri kendi küçük alanlarından sorumlu ve biz bunu istemiyoruz.
Aralarında çok fazla geçiş yapmak istemiyoruz.
Bu diyagramda, her ekibin yapısı ve javascripti olan arasında biraz çapraz
geçişin olduğunu görebilirsiniz ve bu davranış da sunumu değerlendirmektir.
Ve H html javascripti ile küçük bir çakışma var, ancak C Ss gelmeden önce
eskiden olduğu gibi, aslında stil özelliklerini kullandığımız her bir öğede kendi stillerinizi tek tek yazmak zorunda
olduğunuzu unutmayın.
Bu durumda tanıtımımız tarzı aslında yapıya dokunuyordu ve Cs'lerle artık
onları ayırdık.
Bu yüzden HMO'muz saf bir yapıdadır ve başarı saf stildir.
Peki javascript hangi sayfanın davranışını kontrol etmeli ve bazen bunun
anlamı şeylerin nasıl görüneceğini değiştirmek ama aslında javascript içindeki özellikleri değiştirerek
javascriptde şekillendirme yapmak.
Yapabileceklerimiz, onları CSSA dosyasının içinde açıp kapatmaktır.
Dolayısıyla gerçekten yaygın olan kalıplardan biri, vurgulamaya benzer bir CSSA sınıfı tanımlamamız ve bu vurgulama sınıfının beş
ya da altı ya da değiştirdiğimiz birçok farklı özelliğe sahip olmasıdır.
Ardından, bir öğeyi javascript ile seçebilir ve o vurgulama sınıfını verebiliriz.
Dolayısıyla, bir satırla Javascript'te beş farklı özelliği değiştirecek bir sınıf ekleyebiliriz.
Bunun Javascript'de nasıl uygulanacağına bir göz atalım.
Dolayısıyla bir etiket seçmek ve daha sonra stil değiştirmek ancak mavi olmak için renk değiştirmek ve daha
sonra 10 piksel katı kırmızı olabilmek için çizgiyi çizmek yerine bunun yerine bir sınıf bulmak için bir şey çağrılabilir.
Genellikle, sınıfın yapılması gerekeni yansıtan şekilde biraz anlamlı olmasını istersiniz.
Vurgulanan bir şey mi yoksa doğru bir cevap mı var.
Sınıfı uygulamak için ne sebep olursa olsun yüksek puan, iyi bir isim bulmaya çalışıyor.
Bu yüzden bu iyi bir isim değil, bazı sınıf bazı sınıf renk mavi ve sınır 10
piksel katı kırmızı değişiyor.
Sonra tek yapmam gereken etiketi seçip sonra da nokta sınıfı listesine ekleyerek bir nokta ekleyin ve
bu da benim fikrimle etiketimi verecek yeni bir sınıfın tümünde bu stillerin
bazı sınıflarında uygulanacak.
Sınıf listesinde yapabileceğimiz başka birkaç şey var.
Bu örnekte, daha önce gördüğümüz, hangi sınıf ismi alan bir sınıf kaldırma ekleyeceğimize ek olarak üç
yöntem ekledik ve bu sınıf adını sınıf listesinden kaldırdıktan sonra sınıf listesinden son derece kullanışlı
olan sınıf listesini kaldırdık.
Bir sınıf adı gerektiriyor.
Ve eğer verilen öğenin o sınıfı varsa, eleman o sınıfı içermiyorsa o sınıfı kaldırır
ve sonra onu açarım.
Bu yüzden çok çok faydalı.
Bunu her zaman daha sonra kullanacağız.
Öyleyse, buradaki örneğime dönmeden önce size göstereyim.
Aslında yeni bir sınıf tanımlayacağım.
Dolayısıyla, yeni bir stil sayfası yapmadan ve bir bağlantı kullanarak sadece zaman uğruna bir stil
etiketi kullanacağım.
Bu yüzden, sadece büyük diyeceğiniz bir sınıfı tanımlayacağım.
Ve ne yapacağım yazı tipi boyutunu 100 piksel olarak değiştirmek ve renk turuncu olacak şekilde değiştirin.
Ve son olarak, ona beş piksel katı kırmızı bir sınır verelim.
Bu yüzden bende bırakacağım.
Sayfamı yenilersem tabii ki hiçbir şey değişmez, ancak ne zaman yapmak istediğim o sınıfa bir şeye başvurmaktır.
Bu yüzden, bu paragrafın yapmak için büyük bir sınıfı olmasını sağlayacağım, şimdiye kadar bunu seçmem gerekiyor.
Paragraf, sorgu seçici paragrafa eşittir.
TAMAM.
Ve sadece sınıf listesine bakarak başlayalım ve boş olduğunu görebilirsiniz.
Bu paragrafa henüz sınıf atanmamıştır.
Bu yüzden eğer bir tane atamak istersem, yapmam gereken P-Dub sınıfı liste ekle add to add ve sınıfı
büyük eklemek istiyorum.
Ve işte gidiyoruz.
Böylece, stil sayfamdaki yeni değişiklikleri otomatik olarak yansıtıyor.
Tek yapmam gereken büyük sınıfa eklemek.
Umarız ki bunun daha kolay olduğunu ve sorumlulukları birbirinden ayırdığımızı görebilirsiniz.
Yani hepsi javascript yapar; SS'nin belirli bir bölümünde açar veya kapatır, tek tek mülkleri
manüel olarak manuel olarak değiştirmek yerine.
Artık, işleri Javascript'imiz yerine mümkün olduğunca değiştiriyoruz.
Bu yüzden kaldırmak istersem, yapmam gereken tek şey, sınıfta sınıfın büyük kaldırılmamasını ve bahsettiğim en
sevdiğim şeyin süper kullanışlı olmasıdır.
Dolayısıyla şu an geçiş yapıp isabet edersem, girilen ismim sınıfın atanmadığı için büyük
sınıfı atar.
Şimdi büyük olan zaten atandı, böylece onu kaldıracak.
Dolayısıyla bu açıkça, bu yazı tipi sınıfında bu çılgın turuncu yapmak için kullanışlıdır, ancak yapabileceğimiz şey, kullanıcının
yapması için tıklamak için bir liste yapmak gibi bir şey üzerinde olmasıdır.
Ve bunu geçeceğiz.
Ancak tekrar tıklayabilirler ve daha sonra tıkanırlar veya normale dönerler.
Bu yapılmalıdır.
Veya bir sınıfa geçiş yaparak yapabiliriz, bu yüzden yapacağımız bir sınıfa sahip olabiliriz ve tekrar tıklayın
uygulamalı tıklama.
Kaldırıldı.
Bu, geçiş seçeneğini ne zaman kullanabileceğinizi gösteren bir örnek.
Fakat gerçekten çok faydalıdır.
Sınıf listesinde bahsedeceğim son nokta teknik olarak bir dizi değil.
Dolayısıyla, bir sınıf eklemek için bir reklam kullanmamız gerektiği anlamına gelir.
İtme gibi bir şey yapamayız.
Bu yüzden küçük bir not ama teknik olarak bir dizi olmadığını bilmek önemlidir.
Bu nedenle, javascript aracılığıyla tarzı manipüle etmenin iki farklı yolunu ele aldık.
bir mülkiyet yapıyor, ki bu sadece bir ya da iki şey yapıyorsan dürüstçe iyidir.
Birincisi elle tek
Ancak bunu toplu olarak yapıyorsanız veya birden fazla öğe için yapıyorsanız, bir sınıfı kullanmak ve klasörü açmak
ya da kapatmak için daha geleneksel daha iyi bir stil daha iyidir