我有一个“最外层”或“父级”div，它有两个子 div：
1）第一个子 div 在页面加载时可见，位于父 div 内（我在这些 div 周围放置了边框以保持对它们的视觉跟踪），并且此第一个子 div 仅包含一个文本字符串。
2) 另一个 div 在页面加载时为“display:none”。我将在下面将此 div 称为“鼠标悬停 div”。
3）这个“鼠标悬停div”在鼠标悬停时显示，并且有一个“onclick”处理程序，可以在页面底部的div中显示一些文本。
父 div 处理的 onmouseover 事件隐藏第一个子 div（及其文本字符串），然后通过设置其“style: block”显示第二个先前隐藏的 div。
经测试，当鼠标移动发生在父 div 上时，父 div 的“onmousemove”会隐藏第一个 div 并显示另一个 div - 所有这些都工作正常。
问题是，当鼠标单击“鼠标悬停 div”时，永远不会调用其“onclick”处理程序。我可以这么说，因为“onclick”代码无法在页面底部的 div 中显示其文本字符串。
这是代码（注意：在这个项目中没有使用jquery）：
<div id="theParentDiv" class="popupMenuFrame" style="border: 2px solid red;"
onmouseover="displayPopup()" onmouseout="doMOut()">
<div id="theLocale" style="border: 2px solid green; display: inline-block">
Austin, TX
</div>
<div class="hoverDivClass" id="theHoverDiv" style="border: 2px solid purple;"
onclick="handleMenuClick()"
onmousedown="handleMenuClick()">
Austin
</div>
</div>
// These are for debug output …我有一个javascript函数,当用户单击div以获取网页的当前背景颜色(我的笔记本电脑上为白色)时调用该函数:
<div id="div1" onclick="checkbkcolor(id, 1)">Just testing the web page bk color
</div>
这是checkbkcolor()函数:
<head>
<script type="text/javascript">
// DOES NOTHING SO I COMMENTED IT OUT: document.body.style.backgroundColor = "red";
function checkbkcolor(id, val)
{
// THIS RETURNS NOTHING FOR THE COLOR -- the alert box
// only says "the document.body.style.backgroundColor is: "
// and nothing else
alert("the document.body.style.backgroundColor is: "
+ document.body.style.backgroundColor);
document.body.style.backgroundColor = "red";
// The alert box now shows 'red' for the color name, *AND*
// the web page's background has …我有几个JavaScript数组:
var someMotionToys = ["cars", "bikes", "surfboards", "skis"];
var immobileToys = ["xbox", "guitar", "paintbrush", "laptop", "crossword puzzles"];
var rareToys = ["ironmaiden", "pogostick", "lawndarts"];
我有一个HTML'select'标签,如下所示:
<select id="toys" onchange="handleToysChoice(this)">
<option value="someMotionToys">toys in motion</option>
<option value="immobileToys">toys for inside</option>
<option value="rareToys">antique toys</option>
</select>
我在这里处理onchange JavaScript函数:
function handleToysChoice(theToysSelector)
{
var theToySelection = theToysSelector.value;
// AT THIS POINT -- assume the user selected 'toys in motion'
// so 'theToySelection' here is "someMotionToys" -- that is *also*
// the name of my array -- but the following …我想达到以下效果:
<div id='leftSide' style="width: window.innerWidth"> AS WIDE AS CLIENT WINDOW </div>
我认为不可能像上面那样编码.原因是,"window.innerWidth"是窗口对象的Javascript属性 - 我没有看到如何在我的内联CSS中使用该值.
另外,我避免使用'onLoad()'处理程序.我知道我可以添加一个onLoad()处理函数来处理页面的body标签中的页面加载,然后使用我想要设置宽度的所有javascript.但我不喜欢在我的页面中使用onload处理程序.
那么,有没有一些方法,我inline'd CSS访问"window.innerWidth的价值吗？