දෘශ්‍යතාව අතර වෙනස කුමක්ද: සැඟවුණු සහ දර්ශනය: කිසිවක් නැත?

1191

CSS රීති visibility:hiddenසහ display:noneදෙකම ප්‍රති result ලය වන්නේ මූලද්‍රව්‍යය නොපෙනීමයි. මෙම සමාන පද තිබේද?

css visibility

1492

display:noneඑයින් අදහස් වන්නේ ප්‍රශ්නයේ ඇති ටැගය කිසිසේත් පිටුවේ නොපෙන්වන බවයි (ඔබට තවමත් එය සමඟ ඩොම් හරහා අන්තර් ක්‍රියා කළ හැකි වුවද). අනෙක් ටැග් අතර ඒ සඳහා ඉඩක් වෙන් නොකෙරේ.

visibility:hiddenඑයින් අදහස් කරන්නේ display:none, ටැගය නොපෙනෙන නමුත් පිටුවේ ඒ සඳහා ඉඩ වෙන් කර ඇති බවයි. ටැගය විදැහුම් කර ඇත, එය පිටුවේ නොපෙනේ.

උදාහරණයක් වශයෙන්:

test | <span style="[style-tag-value]">Appropriate style in this tag</span> | test

ප්‍රති results ල [style-tag-value]සමඟ ප්‍රතිස්ථාපනය කිරීම display:none:

test |   | test

ප්‍රති results ල [style-tag-value]සමඟ ප්‍රතිස්ථාපනය කිරීම visibility:hidden:

test |                        | test

— kemiller2002
source

15

එකිනෙකාගේ ක්‍රියාකාරිත්වය ගැන අදහස් දැක්වීමක් නැද්ද? නිරතුරුවම ස්ථානගත වී ඇති අංග සැඟවීමට කුමන ක්‍රමය භාවිතා කළ යුතුද යන්න මට කුතුහලයක් ඇත.

— ටොමේ සැටෝ - මොනිකා නැවත

3

මෙය මම කිසිදු පරීක්‍ෂණයක් කර නැති බව සම්පුර්ණ අනුමානයකි, නමුත් මම හිතන්නේ ඒවා එක හා සමානයි. තිරයේ යම් දෙයක් වෙනස් වූ විගස මුළු තිරයම නැවත විදැහුම් කරනු ඇත (අවම වශයෙන් එය පුරුදු වී ඇත), එබැවින් එය ඇත්ත වශයෙන්ම වැදගත් නොවේ. ඔබ තවමත් තිරයක් නැවත පින්තාරු කිරීමට බල කරයි. මෙය බ්‍රව්සරයෙන් ඉතා බ්‍රව්සරයක් විය හැකි අතර ඇත්ත වශයෙන්ම මේවා කෙරෙහි අවධානය යොමු කරනවාට වඩා කේතය ප්‍රශස්තිකරණය කිරීමට වඩා හොඳ ක්‍රම තිබේ.

— kemiller2002

14

E කෙවින් එය නිවැරදි වන අතර ඒවා රිට්‍රිජර් පිරිසැලසුම, තීන්ත සහ සංයුක්ත යන දෙකම එක visibility: hiddenහා display: noneසමානව ක්‍රියාත්මක වේ. කෙසේ වෙතත්, opacity: 0ක්‍රියාකාරීව සමාන වන visibility: hiddenඅතර පිරිසැලසුම් පියවර නැවත සකස් නොකරයි, එබැවින් හිස් අවකාශය තවමත් වෙන් කර ඇති බව ඔබට නොතේරුනහොත් (වෙනත් ආකාරයකින් භාවිතා කරන්න display: none) එය භාවිතා කිරීමට මම උපදෙස් දෙමි .

— ජයරොබින්

78

දෘශ්‍යතාවයට එදිරිව දර්ශනය ගැන කතා කිරීමේදී css- සංක්‍රාන්ති මතකයේ තබා ගැනීම වැදගත්ය. උදාහරණයක් ලෙස, දෘශ්‍යතාවයෙන් ටොගල් කිරීම: සැඟවී ඇත; දෘශ්‍යතාවයට: දෘශ්‍ය; css- සංක්‍රාන්ති භාවිතා කිරීමට ඉඩ දෙන අතර ප්‍රදර්ශනයෙන් ටොගල් කිරීම: කිසිවක් නැත; පෙන්වීමට: වාරණය; නැහැ. දෘශ්‍යතාව: ජාවාස්ක්‍රිප්ට් සිදුවීම් ග්‍රහණය නොකිරීමේ අමතර වාසිය සැඟවී ඇති අතර පාරාන්ධතාව: 0; සිදුවීම් ග්‍රහණය කරයි.

— මයිකල් ඩීල්

10

opacity: 0යෙදවුම් හෝ බොත්තම් සමඟ කටයුතු කිරීමේදී ප්‍රවේශමෙන් භාවිතා කළ යුතුය, මන්ද ඒවා තවමත් පවතින අතර සමහර විට අමුතු පරිශීලක අන්තර්ක්‍රියා ඇති විය හැකිය.

— jacques mouette

236

ඒවා සමාන පද නොවේ.

display:none පිටුවේ සාමාන්‍ය ප්‍රවාහයෙන් මූලද්‍රව්‍යය ඉවත් කරයි, අනෙක් අංග පිරවීමට ඉඩ දෙයි.

visibility:hidden පිටුවේ සාමාන්‍ය ප්‍රවාහයේ මූලද්‍රව්‍යය තවමත් අවකාශයේ පවතී.

ඔබ විනෝද උද්‍යානයක ගමන් කිරීම සඳහා පෙළ ගැසී සිටින බව සිතන්න. රේඛාවේ සිටින අයෙකු කෙතරම් රළු දැයි කිවහොත් ආරක්ෂාව ඔවුන්ව රේඛාවෙන් උදුරා ගනී. පේළියේ සිටින සෑම කෙනෙකුම දැන් හිස් තට්ටුව පිරවීම සඳහා එක් ස්ථානයක් ඉදිරියට ගෙන යනු ඇත. මේ වගේ display:none.

සමාන තත්වයට වඩා මෙය වෙනස් කරන්න, නමුත් ඔබ ඉදිරිපිට සිටින කෙනෙකු අදෘශ්‍යමාන සළුවක් පැළඳ සිටී. රේඛාව නරඹන විට, හිස් ඉඩක් ඇති බව පෙනේ, නමුත් යමෙකුට තවමත් එහි සිටින නිසා මිනිසුන්ට එම හිස් පෙනුමක් පුරවා ගත නොහැක. මේ වගේ visibility:hidden.

— පරිශීලක 22151
source

3

ඔවුන් අතර තවත් විශාල වෙනසක් ඇත: අවම වශයෙන් ක්‍රෝම් හි දෘශ්‍යතාව සංක්‍රාන්ති-ප්‍රමාදය සමඟ භාවිතා කළ හැකි නමුත් දර්ශනය එය නොසලකා හරියි.

— SapphireSun

2

පැහැදිලි කිරීමට විනෝදජනක ක්‍රමයක්, නමුත් සිත්ගන්නා සුළුය. :)

— එලන්ගෝ පෝල් වික්ටර්

107

එකතු කිරීම වටී එක් දෙයක්, එය විමසා නොතිබුණද, වස්තුව සම්පූර්ණයෙන්ම විනිවිද පෙනෙන බවට පත් කිරීමේ තුන්වන විකල්පය ඇත. සලකා බලන්න:

1st <a href="http://example.com" style="display: none;">unseen</a> link.<br />
2nd <a href="http://example.com" style="visibility: hidden;">unseen</a> link.<br />
3rd <a href="http://example.com" style="opacity: 0;">unseen</a> link.

ස්නිපටය පුළුල් කරන්න

(ප්‍රති result ලය බැලීමට ඉහත “කේත ස්නිපෙට් ධාවනය කරන්න” බොත්තම ක්ලික් කිරීමට වග බලා ගන්න.)

1 සහ 2 අතර වෙනස දැනටමත් පෙන්වා දී ඇත (එනම් 2 තවමත් අවකාශය ගනී). කෙසේ වෙතත්, 2 සහ 3 අතර වෙනසක් ඇත: 3 නම්, සබැඳිය මත සැරිසැරීමේදී මූසිකය තවමත් අතට මාරු වන අතර පරිශීලකයාට තවමත් සබැඳිය ක්ලික් කළ හැකි අතර ජාවාස්ක්‍රිප්ට් සිදුවීම් තවමත් සබැඳිය මත වෙඩි තබයි. මෙය සාමාන්‍යයෙන් නොවේ ඔබට අවශ්‍ය හැසිරීම (නමුත් සමහර විට එය එසේ විය හැකිද?).

තවත් වෙනසක් නම්, ඔබ පෙළ තෝරා ගන්නේ නම්, පසුව සරල පෙළ ලෙස පිටපත් කරන්න / අලවන්න, ඔබට පහත සඳහන් දේ ලැබේ:

1st link.
2nd  link.
3rd unseen link.

3 නම් පෙළ පිටපත් වේ. සමහර විට මෙය යම් ආකාරයක ජල සලකුණු සඳහා ප්‍රයෝජනවත් වනු ඇත, නැතහොත් නොසැලකිලිමත් ලෙස පරිශීලකයෙකු ඔබේ අන්තර්ගතය පිටපත් කර අලවා තිබේ නම් පෙන්වන ප්‍රකාශන හිමිකම් දැන්වීමක් සැඟවීමට ඔබට අවශ්‍ය නම්?

— කිප්
source

@greenoldman ඔබට උදාහරණයක් දිය හැකිද? මෙන්න jsfiddle එහි සැඟවුණු මූලද්‍රව්‍යයක් (මම div සහ span උත්සාහ කළෙමි) එහි බහාලුම්වල ඇති එකම මූලද්‍රව්‍යය වන අතර එය තවමත් ඉඩ ලබා ගනී: jsfiddle.net/rmb5wdLd/1

— Kip

Ip කිප්, අමුතු - මට දැන් මෙය කළ නොහැක (මම මගේම ව්‍යාපෘතියද වෙනස් කළෙමි). හරි, මම මගේ පෙර අදහස් ඉවත් කිරීම වඩා හොඳ වන අතර test න ටෙස්ට්කේස් එකක් ඇති විට මම එය පෙන්වන්නම්, ශබ්දය ගැන කණගාටුයි.

— greenoldman

90

display:none පිරිසැලසුම් ප්‍රවාහයෙන් මූලද්‍රව්‍යය ඉවත් කරයි.

visibility:hidden එය සඟවන නමුත් අවකාශය හැර යයි.

— mmaibaum
source

70

ළමා නෝඩ් සම්බන්ධයෙන් විශාල වෙනසක් ඇත. උදාහරණයක් ලෙස: ඔබට දෙමාපිය කොට් and ාශයක් සහ කැදැලි දරුවෙකු සිටී නම්. එබැවින් ඔබ මේ ආකාරයට ලියන්නේ නම්:

<div id="parent" style="display:none;">
    <div id="child" style="display:block;"></div>
</div>

මෙම අවස්ථාවේ දී කිසිදු බෙදීමක් නොපෙනේ. නමුත් ඔබ මේ ආකාරයට ලියන්නේ නම්:

<div id="parent" style="visibility:hidden;">
    <div id="child" style="visibility:visible;"></div>
</div>

එවිට ළමා කොට් div ාශය දෘශ්‍ය වන අතර මවුපිය බෙදීම නොපෙන්වයි.

— ගෝවින්ද
source

හොඳ කරුණක් නම්, මෙය පහසුවෙන් මග හැරිය හැක. display: none / block සංක්‍රාන්තිය අවුලුවන්නේ නැත, එබැවින් දෘශ්‍යතාව භාවිතා කිරීම: සැඟවුණු වැඩ කළ හැකි නමුත් ළමා අංගවලටද ශක්‍යතාව අවශ්‍ය වේ: එකවර සැඟවී ඇත

— Drenai

18

ඒවා සමාන පද නොවේ - display: none පිටුවේ ප්‍රවාහයෙන් මූලද්‍රව්‍යය ඉවත් කරයි, සහ ඉතිරි පිටුව ගලා එන්නේ එය නොමැති ආකාරයට ය.

visibility: hidden මූලද්‍රව්‍යය දර්ශනයෙන් සඟවන නමුත් පිටු ප්‍රවාහය නොව, ඒ සඳහා පිටුවේ ඉඩ තබයි.

— කොන්රෝයිපී
source

15

display: none පිටුවෙන් මූලද්‍රව්‍යය මුළුමනින්ම ඉවත් කරයි, සහ පිටුව ගොඩනඟා ඇත්තේ මූලද්‍රව්‍යය කිසිසේත්ම නොතිබූ ආකාරයට ය.

Visibility: hidden ඔබට එය තවදුරටත් නොපෙනුනත් ලේඛන ප්‍රවාහයේ ඉඩ තබයි.

ඔබ කරන දේ අනුව මෙය විශාල වෙනසක් කිරීමට හෝ නොවීමට ඉඩ ඇත.

— wcm
source

$ ('# මූලද්‍රව්‍යය') භාවිතා කරමින් ඉවත් කරන්න () සම්පූර්ණයෙන්ම පිටුවෙන් (DOM) මූලද්‍රව්‍යය ඉවත් කරයි. එය ප්‍රදර්ශනය නොකිරීම හෝ අවකාශය භාවිතා නොකිරීම යනු එය ඉවත් කිරීම නොවේ. ඔබට තවමත් එහි තත්වය සරල $ ('# මූලද්‍රව්‍යය') සමඟ වෙනස් කළ හැකිය. පෙන්වන්න (), එබැවින් එය "සම්පූර්ණයෙන්ම ඉවත් නොකෙරේ".

— foxontherock

11

visibility:hiddenවස්තුව සමඟ තවමත් පිටුවේ සිරස් උස ගනී. සමග display:noneඑය සම්පූර්ණයෙන් ඉවත් කර ඇත. ඔබ රූපයකට යටින් පෙළක් ඇත්නම් සහ ඔබ එසේ කරන්නේ නම් display:none, එම පා image ය රූපය තිබූ අවකාශය පිරවීම සඳහා ඉහළට ගෙන යනු ඇත. ඔබ දෘශ්‍යතාව කරන්නේ නම්: සැඟවුණු පෙළ එකම ස්ථානයේ පවතිනු ඇත.

— ස්ටීවන් විලියම්ස්
source

සැඟවුණු විට, සංරක්‍ෂිත අවකාශය සිරස් මානය පමණි. තිරස් අතට කුමක් කළ යුතුද?

— ක්‍රිස් නොයි

2

තිරස් මානය ද ආරක්ෂා වේ.

— ජේ බී හර්ටෝ

9

display:noneමූලද්‍රව්‍යය සැඟවී අවකාශය බිඳ වැටෙන visibility:hiddenඅතර මූලද්‍රව්‍යය සැඟවී මූලද්‍රව්‍ය අවකාශය ආරක්ෂා කරනු ඇත. දර්ශනය: පැරණි සංස්කරණ IE සහ සෆාරි වල ජාවාස්ක්‍රිප්ට් වෙතින් ලබා ගත හැකි සමහර ගුණාංගවලට කිසිවක් බලපාන්නේ නැත.

— slashnick
source

7

අනෙක් සියලුම පිළිතුරු වලට අමතරව, IE8 සඳහා වැදගත් වෙනසක් ඇත: ඔබ භාවිතා display:noneකර මූලද්‍රව්‍යයේ පළල හෝ උස ලබා ගැනීමට උත්සාහ කරන්නේ නම් , IE8 0 ලබා දෙයි (අනෙක් බ්‍රව්සර් සත්‍ය ප්‍රමාණ ලබා දෙයි). IE8 නිවැරදි පළල හෝ උස පමණක් ලබා දෙයි visibility:hidden.

— szeryf
source

7

visibility:hiddenඅවකාශය ආරක්ෂා කරයි; display:noneනැහැ.

— මුතු
source

6

display: none;

එය පිටුවේ ලබා ගත නොහැකි අතර කිසිදු ඉඩක් අත්පත් කර නොගනී.

visibility: hidden;

එය මූලද්‍රව්‍යයක් සඟවයි, නමුත් එය තවමත් පෙර මෙන් එකම ඉඩ ප්‍රමාණයක් ගනී. මූලද්රව්යය සඟවනු ඇත, නමුත් තවමත්, පිරිසැලසුමට බලපායි.

visibility: hidden අවකාශය ආරක්ෂා කරන්න display: none නොකරයි.

කිසිවක් පෙන්වන්න උදාහරණය: https://www.w3schools.com/css/tryit.asp?filename=trycss_display_none

දෘශ්‍යතාව සැඟවුණු උදාහරණය: https://www.w3schools.com/cssref/tryit.asp?filename=trycss_visibility

— අනු
source

වෙබ් අඩවියේ දන්නා සාවද්‍යතාවයන් හේතුවෙන් w3 පාසල් සමඟ සම්බන්ධ වීමට එරෙහිව මම උපදෙස් දෙමි.

— ස්කෙරේ

5

දෘශ්‍යතා දේපල සකසා ඇත්නම් "hidden", බ්‍රව්සරය අදෘශ්‍යමාන වුවත් අන්තර්ගතය සඳහා පිටුවේ ඉඩ ලබා ගනී.
නමුත් අපි වස්තුවක් සැකසූ විට "display:none", බ්‍රව්සරය එහි අන්තර්ගතය සඳහා පිටුවේ ඉඩ වෙන් නොකරයි.

උදාහරණයක්:

<div style="display:none">
Content not display on screen and even space not taken.
</div>

<div style="visibility:hidden">
Content not display on screen but it will take space on screen.
</div>

තොරතුරු පෙන්වන්න

— ෂුබෙලාල් කුමාර්
source

5

visibility:hidden මූලද්‍රව්‍යය පිටුවේ තබා ඇති අතර එම අවකාශය අත්පත් කර ගන්නා නමුත් පරිශීලකයාට නොපෙන්වයි.

display:none පිටුවෙහි ලබා ගත නොහැකි අතර කිසිදු ඉඩක් නොතිබෙනු ඇත.

— රමේෂ්
source

3

තවත් එක් වෙනසක් නම් visibility:hidden, සැබවින්ම පැරණි බ්‍රව්සර් තුළ ක්‍රියා කරන අතර display:noneඑසේ නොවේ:

https://www.w3schools.com/cssref/pr_class_visibility.asp

https://www.w3schools.com/cssref/pr_class_display.asp

— ඩේව් බර්ටන්
source

2

වෙනස ශෛලිය ඉක්මවා යන අතර ජාවාස්ක්‍රිප්ට් සමඟ හැසිරවීමේදී මූලද්‍රව්‍ය හැසිරෙන ආකාරය පිළිබිඹු වේ.

බලපෑම් සහ අතුරු ආබාධ display: none:

ඉලක්කගත මූලද්‍රව්‍යය ලේඛන ප්‍රවාහයෙන් ඉවතට ගනු ලැබේ (වෙනත් මූලද්‍රව්‍යයන්ගේ පිරිසැලසුමට බලපාන්නේ නැත);
සියලුම පරම්පරාවන් පීඩාවට පත්ව ඇත (ප්‍රදර්ශනය නොකෙරෙන අතර මෙම උරුමයෙන් “උදුරා ගත නොහැක”);
මේ අනුව ඔවුන් සියලු දී ඉටු නොවන, ඔවුන්ගේ - මිනුම් ඉලක්කය අංගයක් සඳහා වත් එහි පැවත සඳහා කළ නොහැක clientWidth, clientHeight, offsetWidth, offsetHeight, scrollWidth, scrollHeight, getBoundingClientRect(), getComputedStyle(), සියලු ආපසු 0s.

බලපෑම් සහ අතුරු ආබාධ visibility: hidden:

ඉලක්කගත මූලද්‍රව්‍යය දර්ශනයෙන් සැඟවී ඇත, නමුත් එය ප්‍රවාහයෙන් ඉවතට නොගන්නා අතර පිරිසැලසුමට බලපායි, එහි සාමාන්‍ය අවකාශය අල්ලා ගනී;
innerText(නමුත් නොවේ innerHTML) ඉලක්කගත මූලද්‍රව්‍යය සහ පැවත එන්නන් හිස් නූලක් ලබා දෙයි.

— ඇඩම් ජගෝස්
source

1

display:none;මූලද්‍රව්‍යය ප්‍රදර්ශනය නොකරන අතර පිටුවේ ඇති මූලද්‍රව්‍යය සඳහා ඉඩක් ලබා visibility:hidden;නොදෙන අතර පිටුවෙහි මූලද්‍රව්‍යය නොපෙන්වන නමුත් පිටුවේ ඉඩ ලබා දෙනු ඇත. අවස්ථා දෙකේදීම අපට DOM හි මූලද්‍රව්‍යයට ප්‍රවේශ විය හැකිය. එය වඩා හොඳ ආකාරයකින් තේරුම් ගැනීමට කරුණාකර පහත කේතය දෙස බලන්න: දර්ශනය: කිසිවක් එදිරිව දෘශ්‍යතාව: සැඟවී ඇත

— ප්‍රිතම් බෝරා
source

0

මෙහි සවිස්තරාත්මක පිළිතුරු රාශියක් ඇත, නමුත් ඇඟවුම් ඇති බැවින් ප්‍රවේශවීමේ හැකියාව සඳහා මෙය එකතු කළ යුතු යැයි මම සිතුවෙමි.

display: none; සහ visibility: hidden; සියලුම තිර පා er ක මෘදුකාංග කියවිය නොහැක. දෘශ්‍යාබාධිත පරිශීලකයින්ට අත්විඳිය හැකි දේ මතක තබා ගන්න.

ප්රශ්නය සමාන පද ගැන ද අසයි. text-indent: -9999px;දළ වශයෙන් සමාන වන තවත් එකකි. සමඟ වැදගත් වෙනසtext-indent නම් එය බොහෝ විට තිර පා .කයින් විසින් කියවනු ඇත. පරිශීලකයන්ට තවමත් සබැඳිය පටිගත කළ හැකි බැවින් එය ටිකක් නරක අත්දැකීමක් විය හැකිය.

ප්‍රවේශ්‍යතාව සඳහා, අද මම භාවිතා කරන්නේ තිර පා .කයන්ට පෙනෙන පරිදි මූලද්‍රව්‍යයක් සැඟවීමට මෝස්තර එකතුවකි.

{
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}

හොඳ පුරුද්දක් වන්නේ ප්‍රධාන අන්තර්ගතයේ නැංගුරම වෙත “අන්තර්ගතයට මඟහරින්න” සබැඳියක් නිර්මාණය කිරීමයි. දෘශ්‍යාබාධිත පරිශීලකයින්ට සෑම පිටුවකම ඔබේ සම්පූර්ණ සංචාලන ගසට සවන් දීමට අවශ්‍ය නොවනු ඇත. සබැඳිය දෘශ්‍යමය වශයෙන් සඟවා තබන්න. සබැඳියට ප්‍රවේශ වීම සඳහා පරිශීලකයන්ට ටැබ් එක එබිය හැකිය.

ප්‍රවේශ්‍යතාව සහ සැඟවුණු අන්තර්ගතය පිළිබඳ වැඩි විස්තර සඳහා, බලන්න:

— ක්ලීවර්
source