recherche

Maison  >  Article  >  interface Web  >  JavaScript compatible avec IE6 et effet d'expansion

JavaScript compatible avec IE6 et effet d'expansion

小云云
小云云original
2018-02-05 10:52:501346parcourir

Cet article présente principalement JavaScript pour implémenter des effets de pliage et de dépliage compatibles IE6. Il analyse les réponses aux événements JavaScript et les opérations dynamiques liées aux attributs des éléments de page sur la base d'exemples spécifiques. Les amis qui en ont besoin peuvent s'y référer. tout le monde.

Réduire l'effet de pliage lui-même n'est pas difficile, mais innerHTML ne doit pas être utilisé pour déterminer si p dépasse la hauteur. Lors de la réduction, placez le innerHTML de tous p dans une variable et interceptez le contenu de la variable en l'interceptant. la chaîne. et mettez-la dans p. Ce qui suit fournit une méthode pour déterminer si p est trop élevé sur la base de la hauteur inhérente de p lui-même. S'il est trop élevé, un bouton pliable est fourni.

La hauteur de p est jugée par document.getElementById("p's id").offsetHeight Même si le contenu de p est affiché via le backend, document.getElementById(. "p's id").offsetHeight peut également obtenir la hauteur finale de p, comme le code suivant : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>p折叠效果</title>
</head>
<body>
<p id="fold" style="border:1px #000 solid;height:100px;overflow:hidden">
  <?php
    echo "<p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p>";
  ?>
</p>
</body>
</html>
<script>
  alert(document.getElementById("fold").offsetHeight);
</script>

Le résultat exécuté est le suivant :

Ensuite, je peux faire un problème basé sur la hauteur de p. Créez l'effet suivant :

La disposition HTML est la suivante : utilisez un p avec l'identifiant de Fold pour plier le contenu que vous souhaitez réduire ou développer. Après cela, placez un bouton d'une largeur de 100 % dans le p avec l'identifiant du pli, et définissez un bouton avec l'identifiant de more_btn, car le script commence à juger lors du chargement de la page Web, la hauteur du p avec le id du pli, si l'identifiant est La hauteur du p du pli est trop petite, il n'est donc pas nécessaire d'afficher le bouton avec l'ID more_btn. En même temps, placez le contenu p et le bouton à l'intérieur d'un p. 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>p折叠效果</title>
  </head>
  <body>
    <p style="border:1px #000 solid;">
      <p id="fold">
        <p>占位置</p><p>占位置</p><p>占位置</p><p>占位置</p><p>占位置</p><p>占位置</p>
        <p>占位置</p><p>占位置</p><p>占位置</p><p>占位置</p><p>占位置</p><p>占位置</p>
      </p>
      <button id="more_btn" style="width:100%" onclick="showmore(this)">查看更多</button>
    </p>
  </body>
</html>

La clé est le script de page Web suivant, qui est divisé en deux parties. Une partie est la partie de chargement de la page Web, qui est utilisée pour gérer si le. Le bouton est affiché ou non, et si le p est plié. Une autre partie est l'événement de clic sur le bouton Showmore. 


<script type="text/javascript">
  var p_height=document.getElementById("fold").offsetHeight;
  var fold_flag=0;//用于标志现在的p是展开还是折叠，初始为0，以为折叠中
  if(p_height<100){//根据p的高度是否少于100px，判断是否要隐藏按钮
    document.getElementById("more_btn").style.display="none";
  }
  else{//将p的高度强制定为100px，同时超出部分隐藏
    document.getElementById("fold").style.overflow="hidden";
    document.getElementById("fold").style.height="100px";
  }
  //id为more_btn的按钮的点击事件，按钮被点击的时候，将自己传到这个事件中，形式参数为obj
  function showmore(obj){
    if (fold_flag == 0) {//展开的话，就是让p的高度根据其内容自适应，同时显示所有内容
      document.getElementById("fold").style.overflow = "";
      document.getElementById("fold").style.height = "";
      obj.innerHTML="收起"//按钮的文字改变
      fold_flag=1;//折叠标志为1，意味现在为打开状态
    }
    else{//收起就是回到原来的状态。
      document.getElementById("fold").style.overflow="hidden";
      document.getElementById("fold").style.height="100px";
      obj.innerHTML="查看更多"
      fold_flag=0;
    }
  }
</script>

Si vous ne souhaitez pas utiliser de boutons, vous pouvez également définir un lien hypertexte centré.

Recommandations associées :

jQuery implémente la fonction de surveillance du défilement compatible avec IE6_jquery

jQuery implémente la fonction de masquage compatible avec Partage d'exemples IE6

Écologie originale JavaScript compatible avec la fonction d'implémentation de texte défilant contrôlable IE6


Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript jquery html 字符串 事件 innerHTML
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：JavaScript implémente le focus dans la zone de texte et ferme le partage de code de la méthode de saisieArticle suivant：JavaScript implémente le focus dans la zone de texte et ferme le partage de code de la méthode de saisie

Articles Liés

Voir plus