• 0

كيفية اخفاء text أو عنصر Html باستخدام تنسيقات css

كيف يمكنني إخفاء TEXT داخل عنصر بدون اللجوء الى تعديله في صفحه HTML

2 اشخاص أعجبوا بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0

يمكنك إخفاء العنصر من خلال خاصية visibility كالتالي:

h1 {
  visibility: hidden;
}

سيظل مكان النص موجود ولكن فارغ، وإن أردتِ حذف النص ومكانه أيضًا نستخدم خاصية display كالتالي:

h1 {
  display: none;
}
1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0

هناك عدة طرق لاخفاء النص أو العنصر, سوف أقوم بشرح بعضها
بداية لدينا عنصر p في كود html

<p>نص مخفي</p>

الطريقة الاولى لاخفائه كالتالي

p{
	visibility:hidden
}

قمنا بإعطاء العنصر خاصية visibility ومعناها باللغة العربية "الظهور" وقمنا باسناد القيمة hidden والتي معناها بالعربية اخفاء
الطريقة الثانية كالآتي

p{
	display: none;
}

قمنا بإعطاء العنصر خاصية display وأسندنا القيمة none لها أي لن يظهر العنصر
الطريقة الثالثة من الممكن أن نقوم باعطاء العنصر صنف فليكن اسم الصنف hiddentext فيكون الكود كالتالي

<p class="hiddentext">نص مخفي</p>

ونقوم باعطاء الصنف بعض التنسيقات التي تجعله لا يظهر مثل أن نقوم بتغير مكان العنصر ,كالتالي

.hiddentext
{
	position: absolute
	top: 0px;
	left: -5000px;
}

قمنا بتغيير موضع العنصر وحددنا مكانه بالنسبة للشاشة من اتجاه الشمال ومن اتجاه الأعلى, سوف يتغير موضع العنصر وسوف يصبح غير ظاهر

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0

يمكنك إعطاء العنصر خاصية display بحيث تخفي العنصر والنص 

<h1 id="h1">Text</h1>

و التنسيق الخاص به يكون 

h1{
display: none;
}

أو عن طريق javascript يمكنك وضع 

document.getElementById("h1").innerHTML = "";

أو من خلال jquery 

$(function(){
$("#h1").html("");
});	

 

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0

أسهل طريقة لعمل ذلك سيكون بواسطة ال javascript  عن طريق التعديل على ال css كالتالي 

e.style.display = 'none'; //عبارة عن العنصر المطلوب إخفائه e  ال

أو 

e.innerHtml = ''; //عبارة عن العنصر المطلوب إخفائه e  ال

وكمثال على ذلك يمكننا عمل زر لإخفاء عنصر وإظهاره كالتالي

<a href="#" onclick="toggle_visibility('foo');">Click here</a>
<span id="foo">This is foo</span>

<script type="text/javascript">
<!--
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
//-->
</script>

هذه أبسط طريقة وتوجد العديد من الطرق الأخرى سواء بال jquery أو بال css فقط ولكن ستختلف على الطريقة التي تريد العنصر أن يختفي بها

تمّ تعديل بواسطة عبدالباسط ابراهيم
خطأ إملائي
1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0
بتاريخ On 5/23/2021 at 11:17 قال محمد أبو عواد:

هناك عدة طرق لاخفاء النص أو العنصر, سوف أقوم بشرح بعضها
بداية لدينا عنصر p في كود html


<p>نص مخفي</p>

الطريقة الاولى لاخفائه كالتالي


p{
	visibility:hidden
}

قمنا بإعطاء العنصر خاصية visibility ومعناها باللغة العربية "الظهور" وقمنا باسناد القيمة hidden والتي معناها بالعربية اخفاء
الطريقة الثانية كالآتي


p{
	display: none;
}

قمنا بإعطاء العنصر خاصية display وأسندنا القيمة none لها أي لن يظهر العنصر
الطريقة الثالثة من الممكن أن نقوم باعطاء العنصر صنف فليكن اسم الصنف hiddentext فيكون الكود كالتالي


<p class="hiddentext">نص مخفي</p>

ونقوم باعطاء الصنف بعض التنسيقات التي تجعله لا يظهر مثل أن نقوم بتغير مكان العنصر ,كالتالي


.hiddentext
{
	position: absolute
	top: 0px;
	left: -5000px;
}

قمنا بتغيير موضع العنصر وحددنا مكانه بالنسبة للشاشة من اتجاه الشمال ومن اتجاه الأعلى, سوف يتغير موضع العنصر وسوف يصبح غير ظاهر

نعم سيصبح النص غير ظاهر ولاكن سيختفي معه ال bakeground -color and the , padding, color 

انا اريد ان يختفي الtext  ولاكن التنسيقات التي وضعتها له لاتختفي واريد استبدل الtext  بعباره اخرى

فكرتي هنا اني لايمكنني تعديل التنسيقات الموجوده على صفحه html والتي وضعت فيها التنسيقات 

لايمككنني ذلك الى عن طريقه صفحه الcss 

تمّ تعديل بواسطة Rehab Essam
1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0
بتاريخ الآن قال Rehab Essam:

نعم سيصبح النص غير ظاهر ولاكن سيختفي معه ال bakeground -color and the , padding, color 

انا اريد ان يختفي الtext  ولاكن التنسيقات التي وضعتها له لاتختفي واريد استبدل الtext  بعباره اخرى 

يمكنك النظر إلى هذه الإجابة , لفعل ذلك يجب عليك استخدام jquery. 

بتاريخ On 23‏/5‏/2021 at 12:18 قال بلال زيادة:

يمكنك إعطاء العنصر خاصية display بحيث تخفي العنصر والنص 


<h1 id="h1">Text</h1>

و التنسيق الخاص به يكون 


h1{
display: none;
}

أو عن طريق javascript يمكنك وضع 


document.getElementById("h1").innerHTML = "";

أو من خلال jquery 


$(function(){
$("#h1").html("");
});	

 

 

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0
بتاريخ 2 دقائق مضت قال بلال زيادة:

يمكنك النظر إلى هذه الإجابة , لفعل ذلك يجب عليك استخدام jquery. 

 

حقيقه اني لم ادرس الى الان غير الhtml and css فهل يوجد طريقه اخرى 

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0
بتاريخ الآن قال Rehab Essam:

حقيقه اني لم ادرس الى الان غير الhtml and css فهل يوجد طريقه اخرى 

يفضل استخدام jQuery ولكن ربما هذه الطريقة تنفع معك 

<h1 id="h1"><span class="text">Text</span></h1>


h1 .text{
	display: none;
}

h1:after{
	content: "My New Text";
}

لاحظي في خاصية content قمنا بإضافة النص 

content: "My New Text";

 

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0
بتاريخ 13 دقائق مضت قال بلال زيادة:

يفضل استخدام jQuery ولكن ربما هذه الطريقة تنفع معك 


<h1 id="h1"><span class="text">Text</span></h1>


h1 .text{
	display: none;
}

h1:after{
	content: "My New Text";
}

لاحظي في خاصية content قمنا بإضافة النص 


content: "My New Text";

 

<div style="
  background-color: red;
  color: white;
  padding: 20px;
  border: 1px solid blue;
  font-size: 80px;">
  Hello Div
</div>

وهذا تعديلي

div {
  font-family: "Droid Arabic Kufi", sans-serif;
  background-color: #eee !important;
  color: #040100 !important;
  border: none !important ;
  font-size: 20px !important;
  font-weight: bold;
  width: 400px;
  margin: 20px auto;
  text-align: center;
  display: none;
}

div::after {
  content: "rehab";
  
}

ولاكنه اختفى تماما
 

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0
بتاريخ 4 دقائق مضت قال Rehab Essam:

<div style="
  background-color: red;
  color: white;
  padding: 20px;
  border: 1px solid blue;
  font-size: 80px;">
  Hello Div
</div>

وهذا تعديلي


div {
  font-family: "Droid Arabic Kufi", sans-serif;
  background-color: #eee !important;
  color: #040100 !important;
  border: none !important ;
  font-size: 20px !important;
  font-weight: bold;
  width: 400px;
  margin: 20px auto;
  text-align: center;
  display: none;
}

div::after {
  content: "rehab";
  
}

ولاكنه اختفى تماما
 

يجب إضافة النص داخل وسم span بهذا الشكل 

<div style="
  background-color: red;
  color: white;
  padding: 20px;
  border: 1px solid blue;
  font-size: 80px;">
  <span class="text">Hello Div</span>
</div>

ثم نقوم بإخفاء العنصر span بهذا الشكل 

div .text{
	display: none;
}

ونحذف التنسيق التالي 

display: none;

من التنسيق التالي 

div {
  font-family: "Droid Arabic Kufi", sans-serif;
  background-color: #eee !important;
  color: #040100 !important;
  border: none !important ;
  font-size: 20px !important;
  font-weight: bold;
  width: 400px;
  margin: 20px auto;
  text-align: center;
}

فيكون كامل التنسيقات بهذا الشكل 

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
div .text{
	display: none;
}
div {
  font-family: "Droid Arabic Kufi", sans-serif;
  background-color: #eee !important;
  color: #040100 !important;
  border: none !important ;
  font-size: 20px !important;
  font-weight: bold;
  width: 400px;
  margin: 20px auto;
  text-align: center;
}

div::after {
  content: "rehab";
  
}
</style>
</head>
<body>

<div style="
  background-color: red;
  color: white;
  padding: 20px;
  border: 1px solid blue;
  font-size: 80px;">
  <span class="text">Hello Div</span>
</div>

</body>
</html>

 

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0

تجعل

font-size: 0 

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن