通过js来实现css的样式

1.下面是通过js来设置样式的代码：

 // 设置泊位列表区的可视高度。
    var htmlFontsize = $('html').css('font-size');
    htmlFontsize = htmlFontsize.split('px')[0];
    $('.swiper-container').height($('body').height() - htmlFontsize * 3 - htmlFontsize * 2.45); //减掉顶部搜索区和底部菜单的高度
    // $(document).attr("title",Weixin.APPNAME);
    $("title").text(Weixin.APPNAME);

    var bspInput = $('#berthSectionParkTxt');


    bspInput.submit(function () {
        berthSectionParkTxt = $(bspInput).val();

2.js实现样式位置的地方：高度生效位置的地方

 

3.我们也看到了生效的位置变为行内样式。

 

4.完整的代码：

/**
 * Created by hefanfan on 2016/12/06.
 *
 */
var htmlObj = {};
var p_index = 1;  // 第几页
var p_size = 10;  // 一页里面的条数
var p_maxdistance = 0; // 最远距离，方圆几里
var k = 0; // 当前泊位单项的号牌
var berthSectionParkTxt = ''; // 文本框内容
var isAllowRequest = true;  // 没有更多数据的时候不再继续请求后台, true 允许 ，false  不允许。
var thelatitude = 0;
var thelongitude = 0;
var allowRequestNext = true;
var swiper;
var noRecord = false;
htmlObj.topFailTips = $("#divnomaltopFailtips");
htmlObj.topSuccessTips = $("#divnomaltopSuccesstips");

// 【正在加载中】 + 无记录 布局语句
htmlObj.theLayout = ' <div id="confirm_txt"></div>' +
    '<div id="noRecordContain">' +
    '<div class="norecord-layout">' +
    '<img class="norecord-logo" src="common/img/stdlogoblack.png"/>' +
    '<span class="norecord-tooltip"></span>' +
    '</div>' +
    '</div>';

/**
 * loading 动画，跟wx.js里面相比，去掉了setTimeOut, 因为加了会跟iscroll冲突，页面滑动时卡顿。
 */
htmlObj.showLoading = function (thecallback) {
    var str = '<div class="loading_panel"><div class="loading_contain"><!--loading动画 开始-->' +
        '<div class="loader">' +
        ' <div></div>' +
        '<div></div>' +
        '<div></div>' +
        '<div></div>' +
        '<div></div>' +
        '<div></div>' +
        '<div></div>' +
        '<div></div>' +
        '</div><!--loading动画 结束-->' +
        '<span>努力加载中...</span>' +
        '</div></div>';
    if ($('body').find('.loading_panel').length < 1) {
        $('body').append(str);
    }
    setTimeout(function () {
        $('.loading_panel').show();
    }, 5);
    // setTimeout(function () {
    thecallback();
    // }, 50);
};

/**
 * 关闭loading动画
 */
htmlObj.closeLoading = function (thecallback) {
    $('.loading_panel').hide();
    if (!Utils.isNullorEmpty(thecallback)) {
        thecallback();
    }
};

/**
 * 通过当前位置获取停车场和泊位信息
 * @param isPage
 * @param pageSize
 * @param pageIndex
 * @param maxdistance
 * @param queryword
 * @param requestFrom  1是下拉，2是直接搜索
 */
htmlObj.getBerthPloList = function (isPage, pageSize, pageIndex, maxdistance, queryword, requestFrom, thecallback,keyword) {
    var cmd = new Command('app', 'Trinity', 'getParkingLocationByR');
    cmd.longtitude = thelongitude;
    cmd.latitude = thelatitude;
    cmd.appId = appid;
    cmd.isPage = isPage;
    cmd.pageSize = pageSize;
    cmd.pageIndex = pageIndex;
    cmd.maxdistance = maxdistance;
    cmd.comid = stdcomid;
    cmd.onlytype = 2;
    cmd.isPage = 0;
    cmd.ve = 2;
    cmd.keyword = queryword;
    cmd.success = function (result) {
        if (result.state == 1) {
            var data = result.data;
            if (!Utils.isNullorEmpty(data)) {
                $('#noRecordContain').hide();
                $('body').css({'background': '#ebebeb'});
                p_maxdistance = result.maxdistance;
                var theOption = '';
                for (var i = 0; i < data.length; i++) {
                    k = k + 1;
                    theOption += '<div class="search_b_option" id="s_b_Option' + k + '" onclick="htmlObj.optionClick(this.id)" data-id="' + data[i].id + '" data-comid="' + data[i].comid + '" data-systype="' + data[i].systype + '">' +
                        '<div class="search_b_option_block">' +
                        '<div class="s_b_theleft">' +
                        '<p>' +
                        '<span class="s_b_name">' + data[i].name + '</span>' +
                        '<span class="s_b_distance" style="display: none">' + data[i].distance + '</span>'+
                        '<span class="s_b_id" style="display: none">' + data[i].id + '</span>'+
                        '</p>' +
                        '<p>';
                    if (data[i].systype == 1) {
                        theOption += '<span class="s_b_icon_road">' + data[i].sysname + '</span>';
                    }
                    else {
                        theOption += '<span class="s_b_icon_park">' + data[i].sysname + '</span>';
                    }
                    theOption += '<span class="s_b_area">' + data[i].address + '</span>' +
                        '</p>' +
                        '</div>' +
                        '<div class="s_b_theright">' +
                        '<span class="s_b_berthcount">' + data[i].rest + '</span>' +
                        '<span class="s_b_berthstatus">空位</span>' +
                        '</div></div>' +
                        '</div>';
                }
                // 如果是直接搜索
                if (requestFrom == 2) {
                    $('#scrollOptions').html('').append(theOption).append(htmlObj.theLayout);
                    if (!Utils.isNullorEmpty(thecallback)) {
                        thecallback();
                    }
                }

                // 如果是下拉
                if (requestFrom == 1) {
                    // setTimeout(function () {
                    $(theOption).insertBefore($('#confirm_txt'));
//                    },2000);
                    if (!Utils.isNullorEmpty(thecallback)) {
                        thecallback();
                    }
                }

                // 当请求回来的数据不足10条，说明下一页没填满，直接就可以断定已经没有更多数据。
                if (data.length < 10) {
                    // 控制不再请求
                    isAllowRequest = false;
                    $('#confirm_txt').text('没有更多数据').show();
                    noRecord = false;
                }
                else {
                    $('#confirm_txt').text('正在加载更多数据').show();
                }

            }
            else {
                // 如果是直接搜索
                if (requestFrom == 2) {
                    $('#scrollOptions').html('').append(htmlObj.theLayout);
                    $('#noRecordContain').show().find('.norecord-tooltip').text('暂无停车场信息');
                    $('body').css({'background': '#fff'});
                    noRecord = true;
                } else if (requestFrom == 1) {
                    $('#confirm_txt').text('没有更多数据').show();
                    noRecord = false;
                }
                // 控制不再请求
                isAllowRequest = false;
            }

            //上拉一次之后，允许进行下一次加载
            allowRequestNext = true;
        }
        else if (result.state == 0) {
            htmlObj.topFailTips.text("服务器开小差了，等一会再试试吧！");
        }
        else {
            htmlObj.topFailTips.text(result.message);
        }
        htmlObj.closeLoading();
    };
    cmd.executeAsync();
};

/**
 * 初始化
 */
htmlObj.init = function () {
    // 获取附近泊位、路段、停车场
    htmlObj.getBerthPloList(1, p_size * p_index, 1, 0, $(bspInput).val(), 2, function () {
        // 初始化swiper插件，只有等数据加载出来之后，滚动条的高度以及整个swiper-continer的滚动高度才能正确计算出来。
        htmlObj.swiperRequest();
    });

    // 设置泊位列表区的可视高度。
    var htmlFontsize = $('html').css('font-size');
    htmlFontsize = htmlFontsize.split('px')[0];
    // - htmlFontsize * 2.45 屏蔽掉一部分
    $('.swiper-container').height($('body').height() - htmlFontsize * 3 - htmlFontsize * 1.32); //减掉顶部搜索区和底部菜单的高度
    // $(document).attr("title",Weixin.APPNAME);
    $("title").text(Weixin.APPNAME);

    var bspInput = $('#berthSectionParkTxt');


    bspInput.submit(function () {
        berthSectionParkTxt = $(bspInput).val();

        // 重置页码和距离
        p_index = 1;
        p_maxdistance = 0;
        // 每次的搜索都是一次新的加载，页码和距离都是初始化的值。
        htmlObj.showLoading(function () {
            $('#noMore').hide();
            // 控制可以请求
            isAllowRequest = true;
            htmlObj.getBerthPloList(1, p_size, p_index, p_maxdistance, berthSectionParkTxt, 2, function () {
                swiper.onResize(); // 当上一次滚动到很远的底部，比如-1000px开外，再次搜索的时候就要把swiper-wrapper滚回到顶部，这时候用swiper.onResize();可以办到。
                swiper.update();  // 更新滚动区域的高度，并重新计算滚动条的高度。
                swiper.setWrapperTranslate(0); // 让swiper-wrapper 滚到顶部
            });

        });
        if (!Utils.isNullorEmpty($(this).val())) {
            $(this).next('.search_b_del').show();
        }
        else {
            $(this).next('.search_b_del').hide();
        }
    });

    bspInput.on('keyup', function () {
        if (event.keyCode == 13) {
            berthSectionParkTxt = $(bspInput).val();
            // 重置页码和距离
            p_index = 1;
            p_maxdistance = 0;

            // 每次的搜索都是一次新的加载，页码和距离都是初始化的值。
            htmlObj.showLoading(function () {
                // 控制可以请求
                isAllowRequest = true;
                htmlObj.getBerthPloList(1, p_size, p_index, p_maxdistance, berthSectionParkTxt, 2, function () {
                    swiper.onResize(); // 当上一次滚动到很远的底部，比如-1000px开外，再次搜索的时候就要把swiper-wrapper滚回到顶部，这时候用swiper.onResize();可以办到。
                    swiper.update();  // 更新滚动区域的高度，并重新计算滚动条的高度。
                    swiper.setWrapperTranslate(0); // 让swiper-wrapper 滚到顶部
                });
            });
        }
        if (!Utils.isNullorEmpty($(this).val())) {
            $(this).next('.search_b_del').show();
        }
        else {
            $(this).next('.search_b_del').hide();
        }
    });

    // 文本框聚焦的时候切换文本框的 placeholder 提示语
    bspInput.focus(function () {
        $(this).attr('placeholder', '输入停车场名称');
    });

    // 清除文本框内容
    $('.search_b_del').on('click', function () {
        $(bspInput).val('');
        $(this).hide();
    });

    /*// 检测配置是否支持申请停车功能
     if (isAllowPark) {
     $('.s_b_gotoparkblock').show();
     // 点击悬浮icon，跳转到我要停车页
     $('.s_b_gotoparkblock').on('click', function () {
     window.location.href = 'gotopark.html';
     });
     }
     else {
     $('.s_b_gotoparkblock').hide();
     }*/

    $(document).on("click", function () {
        if (!Utils.isNullorEmpty(htmlObj.topSuccessTips.text())) {
            htmlObj.topSuccessTips.text("");
        }
        if (!Utils.isNullorEmpty(htmlObj.topFailTips.text())) {
            htmlObj.topFailTips.text("");
        }
    });

    // 解决iphone返回不刷新还一直保持加载中无法点击的问题
    var browserRule = /^.*((iPhone)|(iPad)|(Safari))+.*$/;
    if (browserRule.test(navigator.userAgent)) {
        window.onpageshow = function(event) {
            if (event.persisted) {
                window.location.reload();
            }
        };
    }
};

/**
 * 上拉滑动加载
 */
htmlObj.swiperRequest = function () {
    swiper = new Swiper('.swiper-container', {
        scrollbar: '.swiper-scrollbar',
        direction: 'vertical',
        slidesPerView: 'auto',
        mousewheelControl: true,
        freeMode: true,
        observer: true, // 启动动态检查器，当改变swiper的样式（例如隐藏/显示）或者修改swiper的子元素时，自动初始化swiper。
        observeParents: true  // 将observe应用于Swiper的父元素。当Swiper的父元素变化时，例如window.resize，Swiper更新。
        /* 当Swiper切换到最后一个Slide时执行这个事件，当只有一个slide的时候，
         运行这个事件可以执行freeMode模式下滑动时因为惯性而冲到页面底部时要做的事。
         freeMode:true 模式下：一个 onReachEnd:function(){} 回调函数，抵得上 onTouchMove 和 onTouchEnd 两个回调事件。
         */
        , onReachEnd: function () {
            if (allowRequestNext == true) {
                allowRequestNext = false;
                if (isAllowRequest) {
                    $('#confirm_txt').text('正在加载更多数据').show();
                    p_index++;
                    htmlObj.getBerthPloList(1, p_size, p_index, p_maxdistance, berthSectionParkTxt, 1, function () {
                        swiper.onResize();
                        swiper.update();
                    });
                }
                else {
                    if (noRecord == false) {
                        $('#confirm_txt').text('没有更多数据').show();
                    }
                    else {
                        $('#confirm_txt').hide();
                    }
                }
            }
        }
    });
};

/**
 * 单项点击事件
 * @param currentid
 */
htmlObj.optionClick = function (currentid) {
    var theOption = $('#' + currentid);
    var theId = theOption.attr('data-id');
    var theComid = theOption.attr('data-comid');
    var theSectionparkname = encodeURI(encodeURI(theOption.find('.s_b_name').text()));
    var theDistance = theOption.find('.s_b_distance').text();
    var id = theOption.find('.s_b_id').text();
    var theSystype = theOption.attr('data-systype');
    var theAddress = encodeURI(encodeURI(theOption.find('.s_b_area').text()));
    var theBerthcount = theOption.find('.s_b_berthcount').text();
    Weixin.showLoading(function () {
        window.location.href = 'appdetail.html' + '?berthofid=' + theId + '&berthofcomid=' + theComid +
            '&theSectionparkname=' + theSectionparkname + '&theDistance=' + theDistance + '&theSystype=' + theSystype +
            '&theAddress=' + theAddress + '&theBerthcount=' + theBerthcount + '&pageindex=' + p_index +
            '&pagesize=' + p_size + '&id=' + id;
        Weixin.closeLoading();
    });
};

/**
 * 页面加载
 */
$(document).ready(function () {
    window.addEventListener('load', function () {
        FastClick.attach(document.body);
    }, false);

    //屏幕理论初始化高度
    var initHeight = window.innerHeight;
    //屏幕理论初始化宽度
    var initWidth = window.innerWidth;
    //屏幕初始状态0-竖屏,1-横屏
    var initScreenState;
    if (initWidth == window.screen.width) {
        initScreenState = 0;
    }
    else {
        initScreenState = 1;
    }
    //屏幕分辨率
    var screenHeight = window.screen.height;
    var screenWidth = window.screen.width;
    //resize监听
    $(window).resize(function () {
        //当前页面高度
        var nowHeight = window.innerHeight;
        var nowWidth = window.innerWidth;
        //竖屏
        if (nowWidth == screenWidth) {
            if (initScreenState == 1) {
                location.reload();
            }
        }
        //横屏
        else if (nowWidth == screenHeight) {
            if (initScreenState == 0) {
                location.reload();
            }
        }
        if (nowHeight != initHeight) {
            $(".nav-bottom-contain").hide();
        }
        else {
            $(".nav-bottom-contain").show();
        }
    });

    htmlObj.init();
});

 

 

5.有更多的交流请加：qq:1659961759