我可以将 JQuery 与内联 html 一起使用吗？如果有怎么办？答案

【问题标题】：Can I use JQuery with inline html? If so how?我可以将 JQuery 与内联 html 一起使用吗？如果有怎么办？
【发布时间】：2014-05-21 02:19:38
【问题描述】：

我一周前学习了 html 和 css。我完成了我的第一个项目，却发现我使用的 div 标签没有调整为移动格式。我做了一些研究，似乎答案可能与 JQuery 或 .JS 相关。我在一个封闭的环境 Wordpress.com 中工作，我还不知道 Java Script，但我通过多年的逻辑研究熟悉了 if then 语句。

所以我实际上有两个问题：

我可以使用带有内联 html 的 JQuery：没有 css 吗？
我该怎么做？

我知道我离这儿很远。我正在阅读关于 codeacademy 的 .JS 教程，但我还没有完成。

只是想我会在这里尝试寻求建议。我什至可能不在球场上！

这是我的 div 标签，这是我尝试的：

<div style="width:950px;height:5px;background-color:#FFFFFF;"></div>



  $(window).resize(function() {

      if ($(this).width() < 951) {

        $('.divIWantedToHide').hide(<div style="width:950px;height:5px;background-color:#FFFFFF;"></div>);

      } else {

        $('.divIWantedToHide').show(<div style="width:450px;height:5px;background-color:#FFFFFF;"></div>);

        }

    });

【问题讨论】：

你搞定了吗？
感谢所有回答的人。我现在要进去看看哪个会起作用。
我已经为 wordpress.com 购买了 CSS 工具包，但我仍然无法使用媒体查询或列出的 CSS 建议来调整 div 的大小。

标签： javascript jquery html wordpress

【解决方案1】：

$('.divIWantedToHide').hide() 将隐藏 div ！

为了将css应用到这个div，你需要使用css：

   $('.divIWantedToHide').css('width':'950px','height':'5px','background-color':'#FFFFFF');

如果你想附加任何 div 并对其应用 css 则使用 append/html

    $('.divIWantedToHide').append('<div style="width:950px;height:5px;background-color:#FFFFFF;"></div>');

或

    $('.divIWantedToHide').html('<div style="width:950px;height:5px;background-color:#FFFFFF;"></div>');

【讨论】：

在预览中，div 函数会在“.html”之后的括号中显示“div 行”

【解决方案2】：

您正试图隐藏具有“.divIWantedToHide”类的 div。但是你的 div 没有任何类。

所以你应该在你的 div 中添加类：

<div class="divIWantedToHide" style="width:950px;height:5px;background-color:#FFFFFF;">  </div>

然后，您可以像这里一样显示和隐藏它：

$(".divIWantedToHide").hide()
$(".divIWantedToHide").show()

【讨论】：

【解决方案3】：

如果您想调整某些元素的大小或应用其他样式以适应设备屏幕尺寸，您只需使用@media css 属性即可。

#your_div_id {
    width: 950px;
    /* ... */
}
@media (max-width: 38em) {
    #your_div_id {
        display:none;
    }
}

【讨论】：

【解决方案4】：

对于这种事情来说，Javascript 有点过头了。

我建议使用 CSS 媒体查询。

粘贴进去，它应该可以正常工作:)

<style>

#YourDiv{
height:5px;
background-color:#FFFFFF;
}

@media only screen and (min-width:951px){
#YourDiv{width:950px;}
}

@media only screen and (max-width:950px){
#YourDiv{width:450px;}
}

</style>


<div id="YourDiv"></div>

您的 div 不再是在 div 标签中定义样式，而是拥有一个可以单独设置样式的唯一名称（一个 id）。一旦您开始构建更复杂的页面，这非常有用，并且大多数人认为这是必要的。 @media 标签的作用与 if 语句基本相同，其中min-width:951px 将在您的窗口至少为 951 像素时设置样式，max-width:950px 在您的窗口最多为 950 像素时设置样式。其余不变的样式设置为 ONE 以上，因为无论窗口大小如何，它们都是相同的。

现在，为了好玩，我将向您展示如何使用纯 Javascript 来实现：

http://jsfiddle.net/AfKU9/1/（通过更改预览窗口大小进行测试）

<script>

var myDiv = document.getElementById("myDiv");

window.onresize = function(){
var w = window.innerWidth;
    if (w > 600){
        myDiv.setAttribute("style",'position:absolute;height:50px;background-color:#CCC;width:400px;' )
    }
    else{
        myDiv.setAttribute("style", 'position:absolute;height:50px;background-color:#333;width:100px;' )
    }
}

</script>

【讨论】：

我已经为 wordpress.com 购买了 CSS 工具包，但我仍然无法使用媒体查询或列出的 CSS 建议来调整 div 的大小。
@user3510681 你能把你的整个 CSS 发布到 pastebin 上吗？你知道如何在浏览器中使用检查器吗？
我想通了。其实我挺尴尬的。我只是将分割线的宽度更改为百分比。很抱歉给您带来了麻烦。

【解决方案5】：

不，在 wordpress.com，您将无法使用内联 JavaScript。不在使用 HTML 编辑器的常规帖子中，也不使用仅包含 CSS 编辑器的 Custom Design upgrade。

也许您会从以下方面受益：

Preprocessor

WordPress.com 支持 CSS 预处理器 LESS 和 Sass（SCSS 语法）。对于希望利用 CSS 扩展（如变量和 mixin）的用户来说，这是一个高级选项。有关详细信息，请参阅 LESS 和 Sass 网站。您可以在外观 -> 自定义 -> CSS 面板底部选择您希望使用的语法。

【讨论】：