Šiame straipsnyje bus parodytas patarimas naudojant paprastą „JavaScript“.
Kaip sukurti paprastą „JavaScript“ patarimą?
Norėdami sukurti patarimą naudodami „JavaScript“, naudokite „ užveskite pelės žymeklį “ ir „ pele “ renginius. Norėdami geriau suprasti, vadovaukitės toliau pateiktais pavyzdžiais.
1 pavyzdys: patarimas naudojant „JavaScript“.
Pateiktame pavyzdyje sukursime patarimą grynu „JavaScript“ ir taip pat sukursime patarimo stilių naudodami „ stilius “ atributas.
Pirma, sukurkite tekstą, kuriame norime parodyti patarimą apie pelės žymeklio užvedimo įvykį:
< h5 id = 'tekstas' > Linux h5 >
Gaukite tekstą, kuriame bus rodomas patarimas, naudodami „ getElementById() “ metodas:
kur lh = dokumentas. getElementById ( 'tekstas' ) ;
Dabar skambinkite „ addEventListener() “ metodą išlaikydami „ užveskite pelės žymeklį ” įvykį ir funkciją () kaip parametrą. Apibrėžtoje funkcijoje pirmiausia sukursime patarimą, sukurdami „ div “ elementą, nustatykite tekstą, kuris bus rodomas ant pelės žymeklio, ir nustatykite tam tikrą patarimo stilių naudodami „ stilius “ atributas. Galiausiai pridėkite patarimą naudodami „ appendChild() “ metodas:
lh. addEventListener ( 'užveskite pelę' , funkcija ( ) {buvo patarimas = dokumentas. sukurtiElementą ( 'div' ) ;
patarimas. vidinis HTML = „Geriausia svetainė mokytis įgūdžių“ ;
patarimas. stilius . matomumas = 'matomas' ;
patarimas. stilius . padėtis = 'absoliutus' ;
patarimas. stilius . fono spalva = 'rgb(107, 101, 101)' ;
patarimas. stilius . kamšalas = '5px' ;
patarimas. stilius . ribinis spindulys = '3px' ;
patarimas. stilius . spalva = 'balta' ;
patarimas. stilius . paliko = 'penkiasdešimt%' ;
patarimas. stilius . plotis = '200 piks.' ;
dokumentas. kūnas . pridėti Vaikas ( patarimas ) ;
} ) ;
Čia naudokite „ pele “ įvykis, kuris pašalins patarimą, o žymeklis bus nutolęs nuo teksto:
lh. addEventListener ( 'pelė lauk' , funkcija ( ) {
dokumentas. kūnas . pašalinti Vaiką ( patarimas ) ;
} ) ;
Išvestis
2 pavyzdys: patarimas naudojant „JavaScript“ su CSS
Taip pat galite sukurti patarimą „JavaScript“ naudodami CSS.
Norėdami tai padaryti, sukurkite sritį, kurioje būtų rodomas patarimo tekstas, naudodami žymą ir priskirkite ID ' #mano patarimas “:
< span id = 'mano patarimas' > span >Gaukite teksto nuorodas ir patarimą naudodami „ getElementById() “ metodas:
kur lh = dokumentas. getElementById ( 'tekstas' ) ;buvo patarimas = dokumentas. getElementById ( 'mano patarimas' ) ;
Paskambinkite patarimu „ užveskite pelės žymeklį “ įvykį nustatydami tekstą funkcijoje naudodami „ vidinis HTML ' nuosavybė:
lh. addEventListener ( 'užveskite pelę' , funkcija ( ) {patarimas. stilius . matomumas = 'matomas' ;
patarimas. vidinis HTML = „Geriausia svetainė mokytis įgūdžių“ ;
} ) ;
Paslėpti patarimą „ pele įvykį nustatydami „ matomumas ' nuosavybė ' paslėptas “:
lh. addEventListener ( 'pelė lauk' , funkcija ( ) {patarimas. stilius . matomumas = 'paslėpta' ;
} ) ;
Sukurti ID“ #mano patarimas “ stilių lape, kuris pakeis patarimo stilių:
#mano patarimas {matomumas : paslėptas ;
plotis : 200 piks ;
Su - indeksas : 1 ;
fone - spalva : rgb ( 107 , 101 , 101 ) ;
tekstą - lygiuotis : centras ;
spalva : baltas ;
kamšalas : 5 piks 0 ;
siena - spindulys : 3 piks ;
paliko : penkiasdešimt %;
}
Kaip matote, patarimas buvo sėkmingai pritaikytas tekste:
Kaip sukurti patarimą naudojant HTML ir CSS?
Taip pat galite sukurti patarimą be „JavaScript“. HTML faile sukurkite tekstą „ Linux “, kur ant jo bus rodomas patarimas. Sukurkite elementą , kad nustatytumėte patarimo tekstą antraštės / teksto žymoje:
Linux
< span klasė = 'patarimo tekstas' >
Platforma mokytis įgūdžių
span >
h5 >
Stiliaus lape sukurkite klasę arba ID, kuris bus priskirtas HTML elementams. Čia mes sukursime klasę ' patarimas “, kuri yra priskirta antraštei:
. patarimas {padėtis : giminaitis ;
ekranas : eilutę - blokas ;
}
Apibrėžkite klasę ' patarimo tekstas “, kad sukurtumėte patarimo teksto stilių ir priskirtumėte jam HTML “ “ žyma:
. patarimo tekstas {matomumas : paslėptas ;
plotis : 150 piks ;
fone - spalva : rgb ( 107 , 101 , 101 ) ;
spalva : #fff ;
tekstą - lygiuotis : centras ;
kamšalas : 5 piks 0 ;
siena - spindulys : 3 piks ;
padėtis : absoliutus ;
Su - indeksas : 1 ;
apačioje : 125 %;
paliko : penkiasdešimt %;
marža - paliko : - 60 piks ;
neskaidrumas : 0 ;
perėjimas : neskaidrumas 0,3 s ;
}
Nustatyti “ užveskite pelės žymeklį “ efektas su “ patarimas “ klasėje, kad būtų rodomas užvedimo efekto patarimas:
. patarimas : užveskite pelės žymeklį. patarimo tekstas {matomumas : matomas ;
neskaidrumas : 1 ;
}
Išvestis
Sudarėme visas būtinas instrukcijas, susijusias su paprastu „JavaScript“ patarimu.
Išvada
Norėdami sukurti patarimą naudodami „JavaScript“, naudokite „ užveskite pelės žymeklį “ ir „ pele “ įvykius, kurie rodo patarimą užvedus pelės žymeklį ant elemento ir paslepia jį, kai suaktyvinamas pelės pašalinimo įvykis. Norėdami sukurti patarimo stilių, naudokite „ stilius “ atributas „JavaScript“. Šiame straipsnyje pademonstravome geriausius įmanomus patarimo kūrimo pavyzdžius naudojant paprastą „JavaScript“, „JavaScript“ su CSS ir patarimo be „JavaScript“.