Ta članek bo prikazal opis orodja z navadnim JavaScriptom.
Kako ustvariti navaden opis orodja JavaScript?
Če želite ustvariti opis orodja z uporabo JavaScripta, uporabite » miška « in » mouseout ” dogodki. Za boljše razumevanje upoštevajte spodnje primere.
Primer 1: Opis orodja z uporabo JavaScripta
V danem primeru bomo ustvarili opis orodja v čistem JavaScriptu in oblikovali opis orodja z uporabo ' stil ” atribut.
Najprej ustvarite besedilo, kjer želimo prikazati opis orodja ob dogodku premikanja miške:
< h5 id = 'besedilo' > Linux h5 >
Pridobite besedilo, kjer se prikaže opis orodja, z uporabo ' getElementById() ” metoda:
kjer je lh = dokument. getElementById ( 'besedilo' ) ;
Zdaj pokličite ' addEventListener() ' tako, da posredujete ' miška ” dogodek in funkcijo() kot parameter. V definirani funkciji bomo najprej ustvarili opis orodja tako, da ustvarimo ' div ', nastavite besedilo, ki bo prikazano ob lebdenju, in nastavite nekaj sloga opisa orodja z uporabo ' stil ” atribut. Nazadnje dodajte opis orodja z uporabo ' appendChild() ” metoda:
lh. addEventListener ( 'miška čez' , funkcija ( ) {je bil opis orodja = dokument. createElement ( 'div' ) ;
opis orodja. notranjiHTML = 'Najboljše spletno mesto za učenje veščin' ;
opis orodja. stil . vidnost = 'viden' ;
opis orodja. stil . položaj = 'absolutno' ;
opis orodja. stil . Barva ozadja = 'rgb(107, 101, 101)' ;
opis orodja. stil . oblazinjenje = '5px' ;
opis orodja. stil . borderRadius = '3px' ;
opis orodja. stil . barva = 'bela' ;
opis orodja. stil . levo = 'petdeset%' ;
opis orodja. stil . premer = '200px' ;
dokument. telo . appendChild ( opis orodja ) ;
} ) ;
Tukaj uporabite » mouseout ”, ki bo odstranil opis orodja, medtem ko se bo kazalec odmaknil od besedila:
lh. addEventListener ( 'miška ven' , funkcija ( ) {
dokument. telo . odstraniOtroka ( opis orodja ) ;
} ) ;
Izhod
Primer 2: Opis orodja z uporabo JavaScripta s CSS
Ustvarite lahko tudi opis orodja v JavaScriptu s CSS.
Če želite to narediti, ustvarite območje za prikaz besedila opisa orodja z uporabo oznake in dodelite ID “ #myTooltip ”:
< span id = 'myTooltip' > razpon >Pridobite sklice na besedilo in opis orodja z uporabo » getElementById() ” metoda:
kjer je lh = dokument. getElementById ( 'besedilo' ) ;je bil opis orodja = dokument. getElementById ( 'myTooltip' ) ;
Pokličite opis orodja na ' miška ' z nastavitvijo besedila v funkciji z uporabo ' notranjiHTML ” Lastnost:
lh. addEventListener ( 'miška čez' , funkcija ( ) {opis orodja. stil . vidnost = 'viden' ;
opis orodja. notranjiHTML = 'Najboljše spletno mesto za učenje veščin' ;
} ) ;
Skrij opis orodja na ' mouseout ' z nastavitvijo ' vidnost » lastnost za « skrit ”:
lh. addEventListener ( 'miška ven' , funkcija ( ) {opis orodja. stil . vidnost = 'skrit' ;
} ) ;
Ustvarite ID ' #myTooltip ” v slogovnem listu, ki bo oblikoval opis orodja:
#myTooltip {vidnost : skrit ;
premer : 200 slikovnih pik ;
z - kazalo : 1 ;
ozadje - barva : rgb ( 107 , 101 , 101 ) ;
besedilo - poravnati : center ;
barva : bela ;
oblazinjenje : 5px 0 ;
meja - polmer : 3px ;
levo : petdeset %;
}
Kot lahko vidite, je bil opis orodja uspešno implementiran v besedilo:
Kako ustvariti opis orodja z uporabo HTML in CSS?
Namig lahko ustvarite tudi brez JavaScripta. V datoteki HTML ustvarite besedilo » Linux «, kjer bo prikazan namig orodja, ko se nanj pomaknete. Ustvarite element , da nastavite besedilo za opis orodja znotraj oznake naslov/besedilo :
Linux
< razpon razred = 'tooltiptext' >
Platforma za učenje veščin
razpon >
h5 >
V slogovnem listu ustvarite razred ali ID, ki bo dodeljen elementom HTML. Tukaj bomo ustvarili razred ' opis orodja «, ki je dodeljen naslovu:
. opis orodja {položaj : relativno ;
zaslon : v vrsti - blok ;
}
Določite razred ' tooltiptext », da oblikujete besedilo opisa orodja in mu dodelite HTML« ' oznaka:
. tooltiptext {vidnost : skrit ;
premer : 150 slikovnih pik ;
ozadje - barva : rgb ( 107 , 101 , 101 ) ;
barva : #fff ;
besedilo - poravnati : center ;
oblazinjenje : 5px 0 ;
meja - polmer : 3px ;
položaj : absolutno ;
z - kazalo : 1 ;
dno : 125 %;
levo : petdeset %;
marža - levo : - 60 slikovnih pik ;
nepreglednost : 0 ;
prehod : motnost 0,3s ;
}
Nastavi ' lebdeti ' učinek z ' opis orodja ” za prikaz orodja za učinek lebdenja:
. opis orodja : lebdeti. tooltiptext {vidnost : viden ;
nepreglednost : 1 ;
}
Izhod
Zbrali smo vsa potrebna navodila, ki se nanašajo na navaden opis orodja JavaScript.
Zaključek
Če želite ustvariti opis orodja z uporabo JavaScripta, uporabite » miška « in » mouseout ”, ki prikaže opis orodja, ko miškin kazalec premaknete na element, in ga skrije, ko se sproži dogodek izklopa miške. Za oblikovanje opisa orodja uporabite » stil ” v JavaScriptu. V tem članku smo prikazali najboljše možne primere ustvarjanja opisa orodja z uporabo navadnega JavaScripta, JavaScripta s CSS in opisa orodja brez JavaScripta.