اذهب إلى المحتوى
  • 2

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

Rehab Essam

السؤال

Recommended Posts

  • 1

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

h1 {
  visibility: hidden;
}

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

h1 {
  display: none;
}
رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 1

سؤال حضرتك بخصوص تكليف الزيرو رقم 42/45

وهذا كود الحل

ويمكنك الاطلاع على باقى حل التكاليف من خلال هذا الرابط

https://codepen.io/mharby/pen/xxaXvwN

يمكن اخفاء النص من خلال اعطاءه لون يكون نفس لون الخلفيه

div {
    width: 400px;
    margin: 50px auto;
    font-size: 20px !important;
    background-color: #eee !important;
    color: #eee !important;
    border: 1px solid #eee !important;
    position: relative;
}
div::after {

    content: "Elzero";

    color: black;

    text-align: center !important;

    position: absolute;

    font-size: 20px !important;

    left: 185px;
}

 

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

  • 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;
}

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

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

  • 0

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

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

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

h1{
display: none;
}

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

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

أو من خلال jquery 

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

 

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

  • 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 فقط ولكن ستختلف على الطريقة التي تريد العنصر أن يختفي بها

تم التعديل في بواسطة عبدالباسط ابراهيم
خطأ إملائي
رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 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
رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 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("");
});	

 

 

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

  • 0
بتاريخ 2 دقائق مضت قال بلال زيادة:

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

 

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

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

  • 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";
  
}

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

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

  • 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
بتاريخ On 5/23/2021 at 11:11 قال Rehab Essam:

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

الامر بسيط بتوحيد لون ال text  بلون الخلفية 

 او نستخدم خاصية text-indent

 

#تكليفات الزيرو 

 

اولا كود ال HTML

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

لاحظ لا يمكن الوصول او التعديل علي كود ال html

.two{
    width: 400px  !important;
    margin: 30px auto  !important;
    color: #eee !important;                  /*  or تم توحيد اللون هنا بلون لون النص الخلفية */
    >>>/* text-indent: -2000px; */                /*  ونطلعها برا الصفحة خالص text-indent  او نستخدم خاصية*/
    font-size: 20px  !important;
    background-color: #eee  !important;   /*  بلون الخلفية هنا  */
    border: none  !important;
    text-align: center; 
    position: relative;
}

.two::after{
    content: "Elzero";
    position: absolute;
    top: 18px;
    left: 196px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: black;
    text-align: center;
}

   الرد متاخر بس عشان لو حد بيتعلم وسال نفس السوال 

بالتوفيق

تم التعديل في بواسطة Abdallah Ali4
more information
رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ On 8‏/3‏/2023 at 22:25 قال Mohamed Harby2:

سؤال حضرتك بخصوص تكليف الزيرو رقم 42/45

وهذا كود الحل

ويمكنك الاطلاع على باقى حل التكاليف من خلال هذا الرابط

https://codepen.io/mharby/pen/xxaXvwN

يمكن اخفاء النص من خلال اعطاءه لون يكون نفس لون الخلفيه

div {
    width: 400px;
    margin: 50px auto;
    font-size: 20px !important;
    background-color: #eee !important;
    color: #eee !important;
    border: 1px solid #eee !important;
    position: relative;
}
div::after {

    content: "Elzero";

    color: black;

    text-align: center !important;

    position: absolute;

    font-size: 20px !important;

    left: 185px;
}

ضيف دي فى ال div  و بس كده 

    content :none;

 

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

  • 0

div{
    width: 400px;
    background-color: #eee !important;
    border: none !important;
    font-size: 0 !important;
    margin: 0 auto;
    padding: 10px;
    position: relative;
    text-align: center;
}
div::before{
    content: "Elzero";
    font-size: 20px !important;
    color: black;
    font-weight: bold;
}

الافضل تديله font size 0px عشان الtext يختفي خالص  

 

تم التعديل في بواسطة Ahmed Hamada12
رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...