స్టైల్ borderStyle అంశం
- పైన పేజీ borderSpacing
- తదుపరి పేజీ borderTop
- పైకి తిరిగి వెళ్ళండి HTML DOM Style 对象
నిర్వచనం మరియు వినియోగం
borderStyle
అంశం సెట్టింగ్ లేదా పెరుగుదలను పొందించడానికి అంగానికి బారడర్ స్టైల్ సిద్ధాంతం.
ఈ అంశం ఒక నుండి నాలుగు విలువలను అనుమతిస్తుంది:
- ఒక విలువను, ఉదాహరణకు: p {border-style: solid} - అన్ని నాలుగు హద్దులు సోలిడ్ గా ఉన్నాయి
- రెండు విలువలు, ఉదాహరణకు: p {border-style: solid dotted} - పై మరియు క్రింద హద్దు గుర్తించబడింది సోలిడ్, కుడి మరియు ఎడమ హద్దు గుర్తించబడింది డాష్
- మూడు విలువలు, ఉదాహరణకు: p {border-style: solid dotted double} - పై హద్దు గుర్తించబడింది సోలిడ్, కుడి మరియు ఎడమ హద్దు గుర్తించబడింది డాట్, క్రింద హద్దు గుర్తించబడింది డబుల్
- నాలుగు విలువలు, ఉదాహరణకు: p {border-style: solid dotted double dashed} - పై హద్దు గుర్తించబడింది సోలిడ్, కుడి హద్దు గుర్తించబడింది డాష్, క్రింద హద్దు గుర్తించబడింది డబుల్, ఎడమ హద్దు గుర్తించబడింది డాష్
మరింత చూడండి:
CSS నేపథ్యం:CSS బార్డర్
CSS పరికరం పరిశీలన హాండ్బుక్కు:border-style అంశం
HTML DOM పరికరం పరిశీలన హాండ్బుక్కు:border 属性
border గుణాత్మకాన్ని
ఉదాహరణ
ఉదాహరణ 1
పట్టికలోని బోర్డర్ స్టైల్ మార్చుతుంది:
document.getElementById("myDiv").style.borderStyle = listValue;
document.getElementById("myDiv").style.borderStyle = "solid";
ఉదాహరణ 2
పట్టికలోని బోర్డర్ స్టైల్ మార్చుతుంది:
document.getElementById("myDiv").style.borderStyle = listValue;
document.getElementById("myDiv").style.borderStyle = "dotted solid double dashed";
ఉదాహరణ 3
పట్టికలోని బోర్డర్ స్టైల్ తిరిగి పొందుతుంది:
document.getElementById("myDiv").style.borderStyle = listValue;
alert(document.getElementById("myDiv").style.borderStyle);
ఉదాహరణ 4
అన్ని వివిధ విలువలకు ప్రదర్శన: var listValue = selectTag.options[selectTag.selectedIndex].text;
document.getElementById("myDiv").style.borderStyle = listValue;
స్వయం ప్రయోగించండి
సింతకం
borderStyle గుణాత్మకాన్ని సెట్ చేస్తుంది:borderStyle గుణాత్మకాన్ని తిరిగి పొందుతుంది:
.style.borderStyle
borderStyle గుణాత్మకాన్ని సెట్ చేస్తుంది:object .style.borderStyle =
value | విలువ |
---|---|
వర్ణన | none |
బోర్డర్ ఏమీలేదు నిర్వచిస్తుంది. డిఫాల్ట్. | hidden |
none తో సమానం, కానీ పట్టిక కేంద్రకాణం బోర్డర్ సంఘర్షణలను పరిష్కరించడంలో మాత్రమే లేదు. | dotted |
పిండి బోర్డర్ నిర్వచిస్తుంది. | dashed |
దశాంశ బోర్డర్ నిర్వచిస్తుంది. | solid |
పూర్తి బోర్డర్ నిర్వచిస్తుంది. | double |
రెండు బోర్డర్లను నిర్వచిస్తుంది. రెండు బోర్డర్ల వెడల్పు బోర్డర్-వెడల్పు విలువకు సమానంగా ఉంటుంది. | groove 3D inset బోర్డర్ బోర్డర్ నిర్వచిస్తుంది. ప్రభావం బోర్డర్-కలర్ విలువకు ఆధారపడి ఉంటుంది. border-color |
3D గుండ్రం బోర్డర్ బోర్డర్ నిర్వచిస్తుంది. ప్రభావం బోర్డర్-కలర్ విలువకు ఆధారపడి ఉంటుంది. | ridge 3D inset బోర్డర్ బోర్డర్ నిర్వచిస్తుంది. ప్రభావం బోర్డర్-కలర్ విలువకు ఆధారపడి ఉంటుంది. border-color |
3D కంబలం బోర్డర్ బోర్డర్ నిర్వచిస్తుంది. ప్రభావం బోర్డర్-కలర్ విలువకు ఆధారపడి ఉంటుంది. | inset 3D inset బోర్డర్ బోర్డర్ నిర్వచిస్తుంది. ప్రభావం బోర్డర్-కలర్ విలువకు ఆధారపడి ఉంటుంది. border-color |
బోర్డర్-కలర్ విలువ: | 3D outset బోర్డర్ బోర్డర్ నిర్వచిస్తుంది. ప్రభావం బోర్డర్-కలర్ విలువకు ఆధారపడి ఉంటుంది. |
initial | ఈ గుణాత్మకాన్ని అప్రమేయ విలువకు సెట్ చేస్తుంది. చూడండి initial. |
inherit | తన పేరిట ఆయా పరిణామాన్ని పాటిస్తుంది. చూడండి inherit. |
సాంకేతిక వివరాలు
డిఫాల్ట్ విలువ: | ఏమీలేదు |
---|---|
వారులువలు: | పదబంధం స్ట్రింగ్ ఆయా కేంద్రకాణం కాంతి ప్రక్రియను సూచిస్తుంది. |
CSS వెర్షన్: | CSS1 |
బ్రౌజర్ మద్దతు
Chrome | Edge | Firefox | సఫారీ | ఒపెరా |
---|---|---|---|---|
Chrome | Edge | Firefox | సఫారీ | ఒపెరా |
మద్దతు | మద్దతు | మద్దతు | మద్దతు | మద్దతు |
- పైన పేజీ borderSpacing
- తదుపరి పేజీ borderTop
- పైకి తిరిగి వెళ్ళండి HTML DOM Style 对象