用于在Google Chrome浏览器中修改CSS样式的Javascript_Javascript_Css_Google Chrome

用于在Google Chrome浏览器中修改CSS样式的Javascript

javascript css google-chrome

用于在Google Chrome浏览器中修改CSS样式的Javascript,javascript,css,google-chrome,Javascript,Css,Google Chrome,我面临着一个奇怪的问题：开发一个与最流行的浏览器尽可能兼容的web应用程序：我有一个HTML，我想通过点击一个按钮，将它从页面内部的原始位置移动到另一个位置以下是HTML代码：文本内容。。。关联的CSS：分区内容{ 填充：15px 15px 15px 215px； } 以及单击按钮时移动块的javascipt： document.getElementById（'content'）.style.padding=“15px 15px 15px 15px”； =>它在Firefo

我面临着一个奇怪的问题：开发一个与最流行的浏览器尽可能兼容的web应用程序：

我有一个HTML，我想通过点击一个按钮，将它从页面内部的原始位置移动到另一个位置

以下是HTML代码：


文本内容。。。

关联的CSS：


分区内容{
填充：15px 15px 15px 215px；
}

以及单击按钮时移动块的javascipt：


document.getElementById（'content'）.style.padding=“15px 15px 15px 15px”；

=>它在Firefox、IE和Opera中运行良好（基本上，它将原来占据页面一半的内容块扩展到整个页面）

=>而在Chrome中，javascript代码不会扩展块宽度，而是以固定的宽度将其移动200px（但如果我一次硬编码一个填充修改，则效果很好…）

我希望澄清一点：如果有人有解决办法的话。。

提前感谢。

以下是另一种可能更稳定的方法：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <style type="text/css">

   .MenuHidden #content { padding: 15px 15px 15px 15px; }
   .MenuHidden #out { display: none; }
   .MenuVisible #content { padding: 15px 15px 15px 215px; }
   .MenuVisible #in { display: none; }

   </style>

   <script type="text/javascript">

   function showSideBar(visible) {
      document.body.className = visible ? 'MenuVisible' : 'MenuHidden';
   }

   </script>

</head>

<body class="MenuHidden">

   <div id="header">        
      <div id="out"><a href="#" onclick="showSideBar(false);">Close menu</a></div>
      <div id="in"><a href="#" onclick="showSideBar(true);">Open menu</a></div>
   </div>

   <div id="content">
      <p>
         Donec sodales
         consectetuer nunc. Aenean nec augue. Curabitur commodo, felis at
         tristique venenatis, nunc pede luctus risus, quis eleifend tellus
         mauris eu nisl. Vivamus varius dictum tellus. Nam ornare sem ornare
         justo. Praesent eget magna ut erat ullamcorper adipiscing. Suspendisse
         potenti. Donec lorem. Sed in velit. Maecenas molestie pharetra lacus.
         Donec in velit. In metus tortor, elementum in, porta vitae, posuere eu,
         purus. Quisque quis est. Nunc odio nibh, aliquam eget, ultrices quis,
         dignissim sit amet, augue. Mauris vitae turpis eget ligula porttitor
         nonummy. Etiam pulvinar bibendum tellus. Nam nulla nisl, elementum nec,
         posuere eget, dignissim vel, dolor.
      </p>
   </div>

</body>
</html>


.MenuHidden#内容{填充：15px 15px 15px 15px；}
.MenuHidden#out{显示：无；}
.MenuVisible#内容{填充：15px 15px 15px 215px；}
.MenuVisible#在{display:none；}
函数显示侧栏（可见）{
document.body.className=可见？'MenuVisible'：'MenuHidden'；
}

多奈克索达莱斯酒店
康塞特图尔·努克。埃尼安·内克·奥古斯。库拉比图尔康莫多，猫在
特里斯蒂克·维尼那提斯，努克·佩德·卢克图斯·里索斯，奎斯·埃利芬德·泰勒斯
莫里斯·尤尼索。口述变异性维瓦摩斯。Nam ornare sem ornare
胡斯托。这是一家大型企业。悬钩子
波蒂蒂。多尼克·洛雷姆。塞德在维利特。Maecenas molestie pharetra lacus。
多内克在维利特。在metus tortor、elementum In、porta vitae、posuere eu、，
普卢斯。奎斯奎斯特。努克·奥迪奥·尼布、阿利奎姆·埃吉特、乌尔特里斯·奎斯、，
贵人坐在阿梅特，奥古斯。毛里斯·维塔·图皮斯·埃吉特·叶舌
不。我是普尔文那尔比本杜姆特卢斯。Nam nulla nisl，nec元素，
波苏尔·埃吉特，德高望重，多洛。

添加

溢出：自动似乎修复了将填充设置为215px时引起的问题
#content { padding: 15px 15px 15px 15px; overflow: auto; }

您必须使用一些JavaScript来修复删除填充时出现的问题：
function hideSideBar(){
  var content = document.getElementById('content');
  content.style.padding="15px 15px 15px 15px";

  if (window.getComputedStyle) {
    var para = content.getElementsByTagName('p')[0];

    var paraWidth = window.getComputedStyle(para, null).getPropertyValue('width');
    para.style.width = paraWidth;

    setTimeout(function(){
      para.style.width = 'auto';
    }, 0);
  }

  document.getElementById('out').style.display="none";
  document.getElementById('in').style.display="block";
}

工作演示：（可编辑通过）
如果您将边距替换为边距，它在Firefox和Chrome中的工作原理相同（无论如何在我的电脑上）：
然后：
function hideSideBar(){
    document.getElementById('content' ).style.margin="15px 15px 15px 15px";
    document.getElementById('out' ).style.display="none";
    document.getElementById('in' ).style.display="block";
}

function showSideBar(){
    document.getElementById('content').style.margin="15px 15px 15px 215px";
    document.getElementById('out' ).style.display="block";
    document.getElementById('in' ).style.display="none";
}

你可能不得不改变你的其他一些风格，让它看起来一模一样
我认为Chrome所做的是合理的（我没有检查规格），增加填充自然会使块变宽。您的代码似乎与您所说的相反；从215px到15px。另外，快速测试表明FF3.5和Chrome3.0之间没有区别：（）感谢您的回答！是的，也许我对动作描述有点困惑。。。无论如何，我知道这不容易解释，所以我上传了一个问题的快速示例：这就是确切的问题（在FF、IE和Opera中按我所希望的方式工作，但在Chrome中不工作）。Thxy您的示例以及我自己的测试文件似乎都在Chrome（3.0.195.27）中工作。也许这段代码是对的，但有其他东西在影响它？另外，+1用于提供完整的示例。通过“两者都在Chrome中工作”您的意思是，当您使用此浏览器进行测试时，文本内容不会出现在页面的右侧（并且不会出现水平滚动条？？）。。。因为我知道这个版本的Chrome，问题是你是对的。不知怎的，我读了你的问题，但没读。很抱歉显然，Chrome在更改内容标签后没有正确地重新评估其子项的尺寸。我看看能不能想出点什么。多亏了你，多亏了Guffa！不幸的是，我刚刚在Chrome 3.0.195.27下测试了它，它没有改变任何东西…：（我试过了，是的，它解决了向右扩展的问题…但是当你再次单击使其返回时，…等待它：内容块不适合窗口的宽度，并保持第一个javascript片段给定的宽度…废话！>最后一次，但并非最不重要的感谢你的时间Brian！我测试了你的两个sol上面是ution和Robert的一个。它们很好用，我选择了最简单的一个，带有margin属性。很高兴我能帮上忙。记住，你可以投票选出你觉得有用的答案；）确实很简单！但是它工作得很好，非常感谢罗伯特！
function hideSideBar(){
    document.getElementById('content' ).style.margin="15px 15px 15px 15px";
    document.getElementById('out' ).style.display="none";
    document.getElementById('in' ).style.display="block";
}

function showSideBar(){
    document.getElementById('content').style.margin="15px 15px 15px 215px";
    document.getElementById('out' ).style.display="block";
    document.getElementById('in' ).style.display="none";
}