我可以将JQuery与内联html一起使用吗？ 如果是这样的话？

Question

一周前我学会了html和css。 我完成了我的第一个项目，发现我使用的div标签没有调整为移动格式。 我做了一些研究，似乎答案可能在于JQuery或.JS。 我在一个包含的环境中工作，Wordpress.com，我还不了解Java Script，但是我很熟悉那些多年来研究逻辑的语句。

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

1. 我可以在内联html中使用JQuery：没有CSS吗？
2. 我该怎么做？

我知道我离开这里了。 我正在通过关于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>);

        }

    });

Answer 1

对于这种事情，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现在具有可以单独设置样式的唯一名称（id），而不是在div标签中定义您的样式。 这非常有用，一旦你开始构建更复杂的页面，大多数人都认为是必要的。 @media标签与if语句基本相同，其中min-width:951px将设置窗口至少951px时的样式， max-width:950px设置窗口为AT MOST 950px时的样式。 其余未更改的样式设置在一次以上，因为无论窗口大小如何，它们都是相同的。

而现在，只是为了好玩我会告诉你如何在纯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>

Answer 2

$（'。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>');

Answer 3

你试图用类'.divIWantedToHide'隐藏一个div。 但你的div没有任何课程。

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

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

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

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

Answer 4

如果要调整大小或将其他样式应用于适合设备屏幕大小的某些元素，则可以使用@media css属性。

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

Answer 5

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

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

预处理器

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