title: How to change OpenLayers style?
body: <p>I am very, very new to web mapping. I have an OpenLayers map made from shape file from PostGis database, have a vector layer and it has default style (GeoServer SLD), but I want to change style of vector layer when user click on refresh button. I was searching online, and I did not find simple and clear examples for this. Anyone please help me, or maybe someone who wanted to do the same and found simple tutorial for this? Any help greatly appriciated.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      var map;
      function init() {
      var bounds = new OpenLayers.Bounds(
          68.089442, 6.752729,
          97.407576, 37.072537);
  
      var options = {
              controls: [ new OpenLayers.Control.Navigation(),
              new OpenLayers.Control.PanZoom()
          ],
  
          maxExtent: bounds,
          maxResolution: 0.11843675,
          projection: "EPSG:4326",
          units: 'degrees'
      };
  
  
      map = new OpenLayers.Map ("map", options );
  
      var india = new OpenLayers.Layer.WMS(
          "cite:india_state - Tiled", 
          "http://localhost:8080/geoserver/cite/wms",
          {LAYERS: 'cite:india_state',STYLES: 'style',
          //format: format,
          tiled: true,
          tilesOrigin: map.maxExtent.left + ',' + map.maxExtent.bottom
          },
          {buffer: 0, displayOutsideMaxExtent: true,
          isBaseLayer: true,
          yx: {'EPSG:4326' : true}
          }
      );
  
      var style = new OpenLayers.Style();
      //rule used for all polygons
      var rule_fsa = new OpenLayers.Rule({
          symbolizer: {
              fillColor: "#ff9a9a",
              fillOpacity: 0.5,
              strokeColor: "#000000",
              strokeWidth: 1,
              strokeDashstyle: "dash",
              label: "${name}",
              labelAlign: "cc",
              fontColor: "#333333",
              fontOpacity: 0.9,
              fontFamily: "Arial",
              fontSize: 14
          }
      });
  
      var rule_highlight = new OpenLayers.Rule({
          filter: new OpenLayers.Filter.Comparison({
              type: OpenLayers.Filter.Comparison.EQUAL_TO,
              property: "classification",
              value: "1",
          }),
  
          symbolizer: {
              fillColor: "#FF7144",
              fillOpacity: 0.6,
              strokeColor: "#FF0000",
              strokeWidth: 2,
              strokeDashstyle: "solid",
              label: " ${name}",
              labelAlign: "cc",
              fontColor: "#000000",
              fontOpacity: 1,
              fontFamily: "Arial",
              fontSize: 16,
              fontWeight: "600"
          }
      });
  
      style.addRules([rule_fsa, rule_highlight]);
  
      var polygon = new OpenLayers.Layer.Vector("Polygon", {
          Style: 'style',
          rendererOptions: {zIndexing: true}
      });
  
      map.addLayers([india,polygon]);
  
      map.zoomToMaxExtent();
  }
  &lt;/script&gt;
  </code></pre>