Ez a cikk bemutatja az eszközleírást egyszerű JavaScript használatával.
Hogyan készítsünk egyszerű JavaScript-eszközleírást?
Ha JavaScript használatával szeretne elemleírást létrehozni, használja a „ egérmutatót ” és „ egérkihúzás ” eseményeket. Kövesse az alábbi példákat a jobb megértés érdekében.
1. példa: Eszköztipp JavaScript használatával
A megadott példában létrehozunk egy elemleírást tiszta JavaScript-ben, és stílust is készítünk a ' stílus ' tulajdonság.
Először hozzunk létre egy szöveget, ahol egy eszköztippet szeretnénk megjeleníteni az egérmutató eseményről:
< h5 id = 'szöveg' > Linux h5 >
Szerezze meg a szöveget, ahol az eszköztipp megjelenik a ' getElementById() ” módszer:
ahol lh = dokumentum. getElementById ( 'szöveg' ) ;
Most hívja a „ addEventListener() ' módszert a ' egérmutatót ” eseményt és paraméterként egy függvényt () A definiált függvényben először egy elemleírást hozunk létre egy ' div ” elemet, állítsa be az egérmutatón megjelenő szöveget, és állítsa be az eszköztipp stílusát a „ stílus ' tulajdonság. Végül adja hozzá az elemleírást a „ appendChild() ” módszer:
lh. addEventListener ( 'egér rá' , funkció ( ) {eszköztipp volt = dokumentum. CreateElement ( 'div' ) ;
eszköztipp. innerHTML = 'A legjobb weboldal a készségek elsajátításához' ;
eszköztipp. stílus . láthatóság = 'látható' ;
eszköztipp. stílus . pozíció = 'abszolút' ;
eszköztipp. stílus . háttérszín = 'rgb(107, 101, 101)' ;
eszköztipp. stílus . párnázás = '5px' ;
eszköztipp. stílus . borderRadius = '3px' ;
eszköztipp. stílus . szín = 'fehér' ;
eszköztipp. stílus . bal = 'ötven%' ;
eszköztipp. stílus . szélesség = '200px' ;
dokumentum. test . appendChild ( eszköztipp ) ;
} ) ;
Itt használja a „ egérkihúzás ” esemény, amely eltávolítja az elemleírást, miközben a kurzor eltávolodik a szövegtől:
lh. addEventListener ( 'egér ki' , funkció ( ) {
dokumentum. test . távolítsa el a gyermeket ( eszköztipp ) ;
} ) ;
Kimenet
2. példa: Eszköztipp JavaScript használata CSS-sel
Javascriptben is létrehozhat elemleírást CSS segítségével.
Ehhez hozzon létre egy területet az eszköztipp szövegének megjelenítéséhez a címkével, és rendeljen hozzá egy azonosítót ' #myEszköztipp ”:
< span id = 'szerszámom' > span >Szerezze meg a szöveg és az eszköztipp hivatkozásait a „ getElementById() ” módszer:
ahol lh = dokumentum. getElementById ( 'szöveg' ) ;eszköztipp volt = dokumentum. getElementById ( 'szerszámom' ) ;
Hívja fel az eszközleírást a „ egérmutatót ' eseményt a funkció szövegének beállításával a ' innerHTML ' ingatlan:
lh. addEventListener ( 'egér rá' , funkció ( ) {eszköztipp. stílus . láthatóság = 'látható' ;
eszköztipp. innerHTML = 'A legjobb weboldal a készségek elsajátításához' ;
} ) ;
Az elemleírás elrejtése a „ egérkihúzás ' esemény beállításával a ' láthatóság ' tulajdona ' rejtett ”:
lh. addEventListener ( 'egér ki' , funkció ( ) {eszköztipp. stílus . láthatóság = 'rejtett' ;
} ) ;
Hozzon létre egy azonosítót ' #myEszköztipp ” azon stíluslapon, amely az eszköztipp stílusát módosítja:
#myEszköztipp {láthatóság : rejtett ;
szélesség : 200 képpont ;
Val vel - index : 1 ;
háttér - szín : rgb ( 107 , 101 , 101 ) ;
szöveg - igazítsa : központ ;
szín : fehér ;
párnázás : 5 képpont 0 ;
határ - sugár : 3 képpont ;
bal : ötven %;
}
Amint láthatja, az eszköztipp sikeresen implementálva lett a szövegben:
Hogyan készítsünk elemleírást HTML és CSS használatával?
Készíthet elemleírást JavaScript nélkül is. A HTML fájlban hozza létre a „ Linux ”, ahol az eszköztipp látható lesz, miközben rámutat. Hozzon létre elemet az eszköztipp szövegének beállításához a címsor/szöveg címkén belül:
Linux
< span osztály = 'eszközleírás' >
Egy platform a készségek elsajátítására
span >
h5 >
A stíluslapon hozzon létre egy osztályt vagy egy azonosítót, amely hozzá lesz rendelve a HTML-elemekhez. Itt létrehozunk egy osztályt ' eszköztipp ', amely a következő címsorhoz van rendelve:
. eszköztipp {pozíció : relatív ;
kijelző : Sorban - Blokk ;
}
Határozzon meg egy osztályt ' eszköztippszöveg ' az eszköztipp szövegének stílusához és a HTML hozzárendeléséhez' ” címke:
. eszköztippszöveg {láthatóság : rejtett ;
szélesség : 150 képpont ;
háttér - szín : rgb ( 107 , 101 , 101 ) ;
szín : #fff ;
szöveg - igazítsa : központ ;
párnázás : 5 képpont 0 ;
határ - sugár : 3 képpont ;
pozíció : abszolút ;
Val vel - index : 1 ;
alsó : 125 %;
bal : ötven %;
árrés - bal : - 60 képpont ;
átlátszatlanság : 0 ;
átmenet : átlátszatlanság 0,3 s ;
}
Állítsa be lebeg ' hatás a ' eszköztipp ” osztály a lebegési effektus eszköztippjének megjelenítéséhez:
. eszköztipp : lebeg . eszköztippszöveg {láthatóság : látható ;
átlátszatlanság : 1 ;
}
Kimenet
Összeállítottuk az összes szükséges utasítást az egyszerű JavaScript eszköztipphez.
Következtetés
Ha JavaScript használatával szeretne elemleírást létrehozni, használja a „ egérmutatót ” és „ egérkihúzás ” eseményeket, amely megmutatja az elemleírást az elemre mutató egérgombbal, és elrejti azt, amikor az egérmutató esemény aktiválódik. Az eszköztipp stílusának kialakításához használja a „ stílus ” attribútum a JavaScriptben. Ebben a cikkben bemutattuk a lehető legjobb példákat az egyszerű JavaScript használatával, a JavaScript CSS-sel és a JavaScript nélküli eszköztippek létrehozására.